列表渲染 wx:for

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

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

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

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

头部引用api.js文件

const api = require('../../utils/api.js');  //路径根据自己的实际情况调整

编写生命周期函数--监听页面加载

onLoad: function (options) {

  let that = this;  // 缺少无效果

  // 所有栏目，获取栏目标题，副标题等内容

  api.getNavs().then(function (sort) {

    that.setData({

      getNavs: sort.data,

    })

  })

  // 产品栏目列表，获取列表内容

  api.getList(5, 4, 'date').then(function (newslist) {

    that.setData({

      getListProduct: newslist.data,

    })

  })

},

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

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

<view class='name'>{{getNavs[2].name}}</view>

<view class='subname'>- {{getNavs[2].subname}} -</view>

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

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

<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>