wechat-miniprogram / minigame-canvas-engine

轻量级canvas2d渲染引擎,开放数据域开发解决方案。
https://wechat-miniprogram.github.io/minigame-canvas-engine/
MIT License
274 stars 64 forks source link

scrollview无法滚动 #17

Closed wutianlin closed 1 year ago

wutianlin commented 1 year ago

编辑器代码如下 截屏2023-02-24 16 53 24

{{~it.data :item:index}} {{~}}
window.styleValue = {
 container: {
    width: 375,
    height: 812,
    alignItems:'center',
},

list: {
    width          : 263,
    height         : 262,     
},

listItem: {
    width: 263,
    height: 64,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor:'rgba(166, 96, 255, 1)',
    borderBottomWidth:1,
    borderColor:'rgba(255, 255, 255, 0.1)',
},

listItemNum: {
    width:40,
    marginLeft:8,
    fontSize: 16,
    fontWeight: 'bold',
color:'#ffffff',
    textAlign:'center',
},  

listItemScore: {
    fontSize: 16,
    color:'#ffffff',
    textAlign: 'right',
    flex:1,
    marginRight:8,
},

listItemName:{
    fontSize: 16,
    fontWeight: 'bold',
color:'#ffffff',
    marginLeft:32,
},

selfListItem: {
    width:335,
    height:66,
    borderRadius: 4,
    borderWidth: 2,
    borderColor: '#ffffff',
    flexDirection: 'row',
    alignItems: 'center',
    },
}

/**
  * xml为编辑器实例,挂载到window对象,通过xml.getValue可以拿到模板字符串
  * style为编辑器实例,挂载到window对象,通过style.getValue可以拿到样式对象的字符串值
  * 控制台默认
  */
let xmlValue   = window.xml.getValue();
let styleValue = window.style.getValue();
let styleObj = eval(styleValue);

// 创建mock数据
let item = {
  nickname: "zim",
  rankScore: 1,
  avatarUrl: 'https://res.wx.qq.com/wechatgame/product/webpack/userupload/20191119/wegoing.jpeg',
};
let datasource =  {
  data     :[],
  selfIndex: 1,
  self     : item
}
for ( let i = 0; i < 20;i++ ) {
  var cp = JSON.parse(JSON.stringify(item));
  cp.rankScore = Math.floor(Math.random()*1000+1)
  datasource.data.push(cp);
}

// 将XML模板编译成XML字符串
let tempFn     = window.doT.template(xmlValue);
let resultText = tempFn(datasource);

function init() {
// getElementPagePosition为IDE内置函数
    let pos = window.getElementPagePosition(canvas);
    // 每次初始化之前先执行清理逻辑保证内存不会一直增长
    Layout.clear();
    // 初始化引擎
    Layout.init(resultText, styleObj);

// 设置canvas的尺寸和样式的container比例一致
    canvas.width = 375;
    canvas.height = 812;
    canvas.style.width =  '375px';
    canvas.style.height = '812px';

    Layout.updateViewPort({
      x     : 0,
      y     : 0,
      width : 375,
      height: 812,
    });

    Layout.layout(context);
  }

 init();
 window.onresize = init;
wutianlin commented 1 year ago

尝试使用默认例子,只调整尺寸同样出现scrollview无法滚动的情况

yuanzm commented 1 year ago

这里确实有一定的问题,看demo是因为有些节点没设置高度,导致最后事件查找出问题了,我修复下

yuanzm commented 1 year ago

已修复