小程序轮播图和for的遍历

<!--pages/two/two.wxml-->
<!-- <text>你好世界</text> -->
<view>
    <swiper indicator-dots='true' mode="widthFix" indicator-color='#333' indicator-active-color='#f30' autoplay='true' style="height:{
   
   {imgheights}}px;">
      <swiper-item class="banneritem" wx:for="{
   
   {bannerUrls}}" wx:key="url">
      <!-- mode="widthFix" 这个属性是图片高度自适应 -->
        <image src='{
   
   {item.url}}' mode="widthFix" ></image>
      </swiper-item>
    </swiper>
</view>
<view wx:for="{
   
   {newslist}}" wx:key="index">
  <view class="item">
    <view class="number-wrapper">
      <text class="content">{
   
   {item.content}}</text>
    </view>
  </view>
</view>

/* pages/two/two.wxss */
.banneritem{
  width: 100%;
}
.banneritem image{
  width: 100%;
}
.item {
  width: 100%;
  height: 186rpx;
  position: relative;
  display: flex;
  margin: 10rpx 10rpx;
  border-bottom: 1px solid rgb(197, 199, 199);
}
.content {
  font-size: 0.875rem;
}

// pages/two/two.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    bannerUrls: [{
        url: './images/1.jpg',
        linkUrl: ''
      },
      {
        url: './images/2.jpg',
        linkUrl: ''
      },
      {
        url: './images/3.jpg',
        linkUrl: ''
      }
    ],
    imgheights: '',
    newslist: []
  },


  /**
   * 组件的方法列表
   */
  methods: {
    onLoad: function () {
      var that = this;
      that.imageLoad();
      wx.request({
        url: 'http://api.tianapi.com/zaoan/index',
        data: {
          key: '2fa8bdec666c46942e03ae3a158e2339'
        },
        method: 'GET',
        header: {
          'content-type': 'application/json'
        },
        success: res => {
          //1:在控制台打印一下返回的res.data数据
          console.log(res.data.newslist)
          //2:在请求接口成功之后，用setData接收数据
          this.setData({
            //第一个data为固定用法
            newslist: res.data.newslist
          })
        }
      })
    },
    imageLoad: function () {
      var that = this;
      wx.getSystemInfo({
        success: function (res) {
          //我们设计图片的尺寸是750*388
          var width = res.windowWidth; //获取当前屏幕的宽度
          var rao = 750 / width; //图片宽度／屏幕的宽度
          var height = 388 / rao; //图片高度／比例
          that.setData({
            'imgheights': height //设置等比缩放的宽度
          })
        },
      })
    },
    //刷新
    onRefresh() {
      //在当前页面显示导航条加载动画
      wx.showNavigationBarLoading();
      //显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
      wx.showLoading({
        title: '刷新中...',
      })
      this.getData();
    },
    //网络请求，获取数据
    getData() {
      wx.request({
        url: 'http://api.tianapi.com/zaoan/index',
        data: {
          key: '2fa8bdec666c46942e03ae3a158e2339'
        },
        method: 'GET',
        header: {
          'content-type': 'application/json'
        },
        success: res => {
          //1:在控制台打印一下返回的res.data数据
          console.log(res.data.newslist)
          //2:在请求接口成功之后，用setData接收数据
          this.setData({
            //第一个data为固定用法
            newslist: res.data.newslist
          })
        },
        //网络请求执行完后将执行的动作
        complete(res) {
          //隐藏loading 提示框
          wx.hideLoading();
          //隐藏导航条加载动画
          wx.hideNavigationBarLoading();
          //停止下拉刷新
          wx.stopPullDownRefresh();
        }
      })
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
      //调用刷新时将执行的方法
      this.onRefresh();
    }

  }
})