PbootCMS微信小程序进行列表渲染

列表渲染 wx:for

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

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

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

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

头部引用api.js文件

//头部引用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、页面使用列表渲染，渲染出列表数据。

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

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

下面的 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>

优模板普通

打赏 收藏 海报 链接