轮播图的JavaScript代码

wxml(使用官方的等等组件来展示):
展示轮播图的wxml、wxss代码
<!–轮播图–>
<swiper class=”banner” indicator-dots autoplay indicator-active-color=”#fbbd08″ circular>
      <block wx:for=”{{banner}}” wx:key=”index”>
            <swiper-item>
                  <image lazy-load src=”{{item.img}}” class=”banner_image” />
            </swiper-item>
      </block>
</swiper>
 
我们通过使用wx:for循环,把js文件里面的banner数组遍历出来即可。
wxss(定义轮播图样式,比如宽、高):
 
.banner {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  height: 350rpx;
}
 
.banner_image {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  height: 500rpx;
}
 
获取轮播图的JavaScript代码
 
/**
 * 页面的初始数据
 */
data: {
  banner:[],
  num:”,
  steps:[],
},
 
/**
 * 生命周期函数–监听页面加载
 */
onLoad: function (options) {
     //一进入页面就获取轮播图数据
     //定义一个获取轮播图的get_banner函数
     this.get_banner()
},
  //获取轮播图
  get_banner(){
    //这个this指向的是Page()方法里面的整个对象,形如Page({this})
    //赋值给that,that也指向了同样的对象
    let that = this  
    db.collection(‘banner’).get({
      success:function(res){
         //获取成功
         //通过setData()方法赋值给data里面的banner数组
         console.log(res)
         that.setData({
            banner:res.data
         })
      },
      fail(er){
         console.log(‘获取失败,所以执行fail函数了,也就是打印了我这句话’)
      }
    })
},
 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64545.shtml

张贴在3