组件名称:recycle-view
需求如图:
红框内的是长列表,recycle-view 组件,要根据屏幕宽度的变化自动占满剩余部分,所以 recycle-view 的 width 属性应该是个动态的值
我的尝试:
// dom代码
<recycle-view width="{{viewWidth}}" batch="{{batchSetRecycleData}}" lower-threshold="100" id="recycleId" bindscrolltolower="nextPage"
class="bottom">
</recycle-view>
// js代码
data: {
realyList: [],
viewWidth: 0,
},
lifetimes: {
ready: function () {
let that = this;
that.createSelectorQuery().select('.bottom').fields({size: true}, function(res) {
that.viewWidth = res.width;
console.log(res); // {width: 227, height: 332}
ctx = createRecycleContext({
id: 'recycleId',
dataKey: 'realyList',
page: that,
itemSize: that.itemSizeFunc
})
console.log(that.viewWidth); // 227
}).exec();
},
detached: function () {
ctx.destroy();
ctx = null;
}
}
自查下样式。
尝试的写法结果渲染出来是这样的: