收藏
回答

如何设置recycle-view的宽度为动态宽度?

组件名称: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: [],
  viewWidth0,
},
lifetimes: {
  readyfunction () {
    let that = this;
    that.createSelectorQuery().select('.bottom').fields({sizetrue}, 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();
  },
  detachedfunction () {
    ctx.destroy();
    ctx = null;
  }
}
回答关注问题邀请回答
收藏

2 个回答

  • Cjiang
    Cjiang
    2022-02-11

    自查下样式。

    2022-02-11
    有用
    回复
  • tada
    tada
    2022-02-11

    尝试的写法结果渲染出来是这样的:

    2022-02-11
    有用
    回复
登录 后发表内容