联系我们

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

上海小程序开发,小程序轮播案例

2020-2-13 0:00:00

上海小程序开发.jpg

上海小程序开发.jpg


====index.wxml文件代码显示====


<view class="container">

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

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

          <swiper-item>

             <navigator url="{{item.link}}" hover-class="navigator-hover">  

              <image src="{{item.url}}" class="slide-image" width="355" height="150"/>  

             </navigator>

          </swiper-item>

        </block>  

</swiper>

</view>



====index.js文件代码显示====

//index.js

//获取应用实例

const app = getApp()


Page({

 data: {

   imgUrls: [

     {

       link: '/pages/index/index',

       url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1623318287,3864173199&fm=27&gp=0.jpg'

     }, {

       link: '/pages/logs/logs',

       url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532429494100&di=6d4f20a64fb21f113e1bb67be1cdbb63&imgtype=0&src=http%3A%2F%2Fimg.juimg.com%2Ftuku%2Fyulantu%2F121019%2F240425-12101920154274.jpg'

     }, {

       link: '/pages/index/index',

       url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532429494100&di=f3712ddf9ca5b37bf81f2cea4ae40c54&imgtype=0&src=http%3A%2F%2Fpic32.photophoto.cn%2F20140808%2F0042040230406581_b.jpg'

     }

   ],

   indicatorDots: true, //小点

   autoplay: true, //是否自动轮播

   interval: 3000, //间隔时间

   duration: 500, //滑动时间

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

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

 }

})



====index.wxss文件代码显示====

注意:.container swiper 和image的样式必须要写,否则轮播图片不显示,这个应该是腾讯的一个bug吧?

注意:.container swiper 和image的样式必须要写,否则轮播图片不显示,这个应该是腾讯的一个bug吧?

.container{

 padding: 0px;

 width:100%;

}

.slide-image{

 width: 100%;

}

.container swiper{

 width: 100%;

}

.container swiper image{

 width: 100%;

}


上一条新闻:asp.net 母版嵌套,更新title内容
下一条新闻:青浦小程序开发,小程序轮播案例2

 

4008-520-214 54057491 info@maolian.net