当前位置: 首页 >>服务端开发 >>Asp.Net >>常用API >>微信小程序创建轮播图效果

微信小程序创建轮播图效果

时间:2018/9/12 7:12:01 【admin】

微信小程序创建轮播图效果…

来源:https://blog.csdn.net/wujiangwei567/article/details/52764688

应用中最常见的就是轮播图了,今儿个就讲讲微信小程序中轮播图的使用


轮播图,不外乎俩个要素,跳转链接 和 图片地址


1. 设置数据


我在 pages/test/test.js中添加如下数据



//test.js

//获取应用实例

var app = getApp()

Page({

  data: {

      imgUrls: [

       {

          link:'/pages/index/index',

          url:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' 

       },{

          link:'/pages/logs/logs',

          url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg' 

       },{

          link:'/pages/test/test',

          url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' 

       } 

    ],

    indicatorDots: true,

    autoplay: true,

    interval: 5000,

    duration: 1000,

    userInfo: {}

  },

  onLoad: function () {

    console.log('onLoad test');

  }

})


其中 imgUrls 是我们轮播图中将要用到的 图片地址和 跳转链接

indicatgorRots 是否出现焦点


autoplay  是否自动播放


interval  自动播放间隔时间


duration 滑动动画时间


更多样式编辑请参看文档  https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1475052054228




2. 部署到页面


找到 文件 pages/test/test.wxml


<swiper indicator-dots="{{indicatorDots}}"

        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

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

        <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>


注意: swiper 千万不要在外面  加上任何标签 例如 <view> 之类的 ,如果加了可能会导致轮播图出不来

3. 添加页面样式


创建文件 pages/test/test.wxss


.slide-image{

    width: 100%;

}


加上上面的样式可以使 轮播图的宽度达到100% 然后更漂亮点,当然可以根据自己的喜好罗!



看效果

CopyRight:2007-2018 编程语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮