微信小程序轮播图demo

1.wxml

代码语言：javascript复制

<!-- 轮播图 -->
<view class="box"> 
  <swiper class='swiper' indicator-dots="true" indicator-color="#f4f4f4" indicator-active-color="#4eb8b8" autoplay="true" interval='2000' circular='true'>
    <block wx:for="{{imgList}}" wx:key="imgList">
      <swiper-item bindtap='chomeCarouselClick' data-url='{{item.url}}'>
        <image class="img" src='{{item.url}}' mode='aspectFill' ></image>
      </swiper-item>
    </block>
  </swiper>
 </view>
/*
  indicator-dots 是否显示指示器
  indicator-color 指示器默认颜色
  indicator-active-color   指示器选中颜色
  autoplay 是否自动播放
  interval 每一页停留的时长
  circular 播放到最后一页后是否再衔接第一页循环播放
*/

2.wxss

代码语言：javascript复制

page { //当前页背景色
  background-color: #f4f4f4;
}
.box{
  width: 100%;
  background-color: reb;
}
.swiper{
  width: 100%;
  height: 400rpx;
  display: block;
  position: relative;
  background: #f4f4f4;
}
.img{
  width: 100%;
  height: inherit;
}

3.js

代码语言：javascript复制

 data: {
    host: getApp().globalData.baseUrl,
    carouselList:[],
  },
 onLoad: function (options) {
    this.requestCarouselListData();//请求轮播图
  },
  //请求轮播图
  requestCarouselListData(){
    var that = this;//注意this指向性问题
    var urlStr = that.data.host   "/xjj/chome_carousel_list.json"; //请求连接注意替换（我用本地服务器模拟）
    console.log("请求轮播图："   urlStr);
    wx.request({
      url: urlStr,
      data: {//这里放请求参数，如果传入参数值不是String，会被转换成String 
        // x: '',
        // y: ''
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log("轮播图返回值：");
        console.log(res.data.result);
        var resultArr = res.data.result;
        that.setData({
          carouselList: resultArr
        })
      }
    })
  },

//点击了轮播图
chomeCarouselClick: function (event) {
    var urlStr = event.currentTarget.dataset.url;
    console.log("点击了轮播图："   urlStr);
    // wx.navigateTo({
    //   url: 'test?id=1'
    // })
  },

微信小程序

0 人点赞