列表渲染 wx:for

在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

通过列表渲染获取产品列表内容

1、获取栏目标题和副标题,栏目列表内容

头部引用api.js文件

//头部引用api.js文件
const api = require('../../utils/api.js');  //路径根据自己的实际情况调整
//编写生命周期函数--监听页面加载
onLoadfunction (options) {
  let that = this;  // 缺少无效果
  // 所有栏目,获取栏目标题,副标题等内容
  api.getNavs().then(function (sort) {
    that.setData({
      getNavs: sort.data,
    })
  })
  // 产品栏目列表,获取列表内容
  api.getList(54'date').then(function (newslist) {
    that.setData({
      getListProduct: newslist.data,
    })
  })
},

2、页面使用列表渲染,渲染出列表数据。

此处使用数据绑定,显示出产品里的标题和副标题

通过列表渲染,渲染出列表数据

下面的 navigator 标签是小程序中的页面跳转标签,添加是为了为下面的跳转传值做准备。

<view class='name'>{{getNavs[2].name}}</view>
<view class='subname'>- {{getNavs[2].subname}} -</view>
<view class='news-li' wx:for="{{getListProduct}}" wx:key="this">
  <navigator url="../shownews/shownews?id={{item.id}}" hover-class="navigator-hover">
    <view class='news-img'>
      <image src='http://pboot.syabq.cn{{item.ico}}'></image>
    </view>
    <view class='h1'>{{item.title}}</view>
    <view class='time'>{{item.date}}</view> <text class='visits'>{{item.visits}}次</text>
  </navigator>
</view>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。