微信小程序里的列表渲染

官方文档

关于如何在小程序页面中添加列表, 又如何给列表里的元素添加监听事件, 如何动态刷新列表

日常吐槽一下微信小程序 翔一样的文档

基础写法

列表最基础的写法如下:

<!--wxml 文件-->
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

//js 文件
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

效果图 # 多列表( 顺带滚动列表 )

主要用在侧边栏中, 一个列表展示一级目录, 另一个展示二级目录

思路: 先用两个 view 将两个 scroll-view 包起来, 主轴设置为 column

再用一个 view 把上面两个 view 包起来, 主轴设置为 row

具体代码如下:

const app = getApp()
Page({
  data: {
      arrayType: [{
          type_name: '测试类型1'
      },{
          type_name: '测试类型2'，
      }],
      arrayBrand:[{
          brand_name: '测试品牌1'
      },{
          brand_name: '测试品牌2'
      }],
  },
  tap_type: function(res){//类型菜单监听事件
      console.log(res)
  },
  tap_brand: function(res){//品牌菜单监听事件
    console.log(res.currentTarget.dataset.name)
  },
}

<!--wxml-->>
<view class="side"><!--主轴设置为 column 的 view-->
    <view class="lists"><!--主轴设置为 row 的 view1-->
      <scroll-view class="type" scroll-y>
          <view data-name="{{item.brand_name}}" class="list_item" wx:for={{arrayBrand}} wx:key="brandUnique"><!--这里-->
        {{item.type_name}}
          </view>
      </scroll-view>
    </view>
    <view class="lists"><!--主轴设置为 row 的 view2-->
      <scroll-view class="brand" wx:for="{{arrayBrand}}" scroll-y>
          <view data-name="{{item.type_name}}" class="list_item" wx:for={{arrayType}} wx:key="typeUnique"><!--还有这里-->
        {{item.brand_name}}
          </view>
      </scroll-view>
    </view>
</view>

/*wxss*/
.side{
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  position: fixed; 
  background: rgb(236, 236, 236);
}
.lists{
  display: flex;
  flex-direction: column;
  height: 100%;/*这里一定要设置宽度, 高度, 不然 .side 设置的 flex 无法起作用*/
  width: 100%;
}
.type{
  height: 100%;
  width: 200rpx;
  background: rgba(255, 255, 255, 0.76);
  border:2rpx solid #0000005b
  overflow: auto;
  white-space: nowrap;
}
.brand{
  height: 1000rpx; /*这里是本来应该用 100%, 但底部的 tabbar 会挡到, 故按需选择高度*/
  width: 600rpx;
  background: rgb(218, 218, 218);
  border:2rpx solid #0000005b
  overflow: auto;
  white-space: nowrap;
}

效果图 注意: 使用 scroll-view 时, 应该把 for 循环写在 scroll-view 所包围的 内容中( 如上面的view )

关于 wx:key

参考资料

官方说明:

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

在进行上面的测试中会遇到一个 warning: Now you can provide attr “wx:key” for a “wx:for” to improve performance.

作用

加快动态改变数据时 wx:for 的渲染速度

所以, 如果列表数据时静态的, 可以不理会这个 warning

而对于需要动态修改列表内容的则建议加上这个进行

如何使用

<scroll-view class="type" wx:for="{{arrayType}}" wx:key="typeUnique" scroll-y>
    {{item.id}}
    {{item.message}}
</scroll-view>

key 值是数组中的一个元素, 建议 key 值不重复, 否则在重新渲染的时候无法起作用( 不会使程序奔溃 ), 并报出 warning

key 值不会影响排序

列表点击事件 [转]

微信小程序 wx:for 点击事件

需求: 点击列表中某处, 获取此处的内容. 常用于像上面展示的菜单.

为了实现这个内容, 需要在 scroll-view 中嵌套一个 view 以精确获取点击位置的值

<scroll-view class="type" wx:for="{{arrayType}}" wx:key="typeUnique" scroll-y>
    <view bindtap="tap_type" data-name="{{item.message}}">
      {{item.message}}
    </view>
</scroll-view>

tap_type: function(res){
    console.log(res)
},

返回的值在 res.currentTarget.dataset.name 中

web 应用返回的数据 ## 动态刷新列表

首先, 需要一个数据源, 这里直接从本地另一个 web 应用取

在 data 中初始化数据时就不需要赋值了, 声明一下就可以( 也可以按照需要赋值 )

这里设置在加载页面的时候自动获取

data{
    arrayType: [],
},
onLoad: function () {
    const that = this;
    wx.request({
      url: app.globalData.serverAddress + '/wechat/goods/getTypes',
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        console.log(res.data.types)
        that.setData({//这里点到 types 就可以了, 这样才是一个 array
          arrayType: res.data.types
        })
      }
    })
},

<scroll-view class="type" scroll-y>
    <!--这里要注意, data-name 要改成传回来的数据对应的 key 名, 可变内容也一样-->
    <view bindtap="tap_type" data-name="{{item.type_name}}" wx:for="{{arrayType}}" wx:key="typeUnique">
      {{item.type_name}}
    </view>
</scroll-view>

web 应用的数据  效果图