联系我们

为客户提供超预期的高品质网站设计!

青浦小程序开发,小程序轮播案例2

2020-2-14 0:00:00

上海小程序开发.jpg

上海小程序开发.jpg

<!--index.wxml-->


<view class="container">

 <swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000" indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}">

   <block wx:for="{{picList}}" wx:key="index">

     <swiper-item>

       <image src="{{item}}" class="slide-image" mode="aspectFill" bindtap='previewImg' data-previewurl='{{picList}}'

       data-currenturl='{{item}}'/>

     </swiper-item>  

   </block>  

 </swiper>

</view>




//index.js文件

//获取应用实例

const app = getApp()

Page({

 data: {

   beforeColor: "#ffffff",//指示点颜色

   afterColor: "#D19634"//当前选中的指示点颜色

 },

 onLoad: function() {

   var that = this

   var picList = []

   picList.push("//images/meat1.jpg")

   picList.push("//images/meat2.jpg")

   picList.push("//images/meat3.jpg")

   that.setData({

     picList: picList,

   })

 }

})





/**index.wxss文件**/


page {

 background-color:#b3d4db;

}

.container{

padding: 0px;

width:100%;

}

swiper{

 width: 100%;

}

.slide-image{

 width: 100%;

 height: 100%;

}






上一条新闻:上海小程序开发,小程序轮播案例
下一条新闻:js操作json对象

 

4009-606-208 54057491 info@