任何项目中都会有个数据列表，那么前端就要把这个列表中的数据逐个的渲染出常人能看明白的界面信息。

假设有这么个数据列表

data: {
    list_news:[
      {
        text:"第1条新闻",
        img:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F0d%2F96%2F7b%2F0d967b771102473f963e34bd916e5dc0.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647746356&t=75d3a2f8818a8284b4cedbcbdf09956b"
      },
      {
        text:"第2条新闻",
        img:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F0d%2F96%2F7b%2F0d967b771102473f963e34bd916e5dc0.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647746356&t=75d3a2f8818a8284b4cedbcbdf09956b"
      },
      {
        text:"第3条新闻",
        img:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F0d%2F96%2F7b%2F0d967b771102473f963e34bd916e5dc0.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647746356&t=75d3a2f8818a8284b4cedbcbdf09956b"
      },
      {
        text:"第4条新闻",
        img:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F0d%2F96%2F7b%2F0d967b771102473f963e34bd916e5dc0.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647746356&t=75d3a2f8818a8284b4cedbcbdf09956b"
      },
      {
        text:"第5条新闻",
        img:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F0d%2F96%2F7b%2F0d967b771102473f963e34bd916e5dc0.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647746356&t=75d3a2f8818a8284b4cedbcbdf09956b"
      }
    ]
  },

然后在 wxml 中将上面的数据给遍历出来的写法

<view>
  <view class='news-header'>
    <text>新闻</text>
  </view>
  <view class="body">
    <view wx:for="{{list_news}}">
      <image class="news-image" src="{{item.img}}"></image>
      <text>{{item.text}}</text>
    </view>
  </view>
</view>

最后在 wxss 中写出最终呈现效果的样式（这里写法与CSS样式一样的，就不多记录了）。

转载请注明：隨習筆記 » 微信小程序-遍历列表