微信小程序循环数据

来源:互联网 发布:windows ntp配置 编辑:程序博客网 时间:2024/05/18 00:59

/**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {      var content_for=[        {          date: "2020年 10月 9日 ",          title: "那年夏天",          header_url:"/images/3.png",          image_url: "/images/6.jpg",          content: "天不言自高,地不言自厚,奇迹,是不会在容易的道路上绽放的。人生没有如果,只有后果和结果,过去的不再回来,回来的不再完美。",        },        {          date: "2022年 10月 9日 ",          title: "夏天",          header_url: "/images/3.png",          image_url: "/images/8.jpg",          content: "人生没有如果,只有后果和结果,过去的不再回来,回来的不再完美。",        },      ]      this.setData({           key: content_for      });    },

  • 每个for循环都要用block标签包括
  • wx:for-item=”item” 默认有可无
  • wx:for-index=”idx”循环下标值 0,1,2
   <block  wx:for="{{key}}" wx:for-item="item" wx:for-index="idx">    <view class="content">        <!-- 头像 -->        <view class="author-date">             <image src="{{item.header_url}}" class="author"></image>            <text class="date">{{item.date}}{{idx}}</text>        </view>        <!-- 标题内容 -->         <text class="title">{{item.title}}</text>         <image class="image" src="{{item.image_url}}"></image>         <text class="article-content">{{item.content}}</text>        <view >          <image class="article-images" src="../../images/icon/chat.png"></image>          <text  class="article-text">66</text>          <image class="article-images" src="../../images/icon/view.png"></image>          <text class="article-text">88</text>        </view>     </view>  </block>

这里写图片描述


不要试图给自己找任何借口,错误面前没人爱听那些借口。