E企盈营销工具技术服务商 热线:4006-838-530

【小程序】禄丰县E企盈小程序小程序swiper组件实现间距轮播

swiper组件实现不同效果间距轮播先不急着看实现过程,先看看三种效果图,如果是你想要的效果那请看下面的过程,不是的话也不浪费大家的时间(就是这么体贴唉)。常见问题:小程序swiper有时候滑动,滑来滑去会卡在中间,跳转到别的页面在跳转回来还是一样的卡在哪里,猜测是轮播图下标的问题,所以,就在onshow哪里,跳转回来的时候,初始化下标就可以解决问题this.setData({      current: 1,    })

效果图一 利用css效果图二  利用css效果图三 利用css 和 js实现两边小 中间大如果有你想要的效果,那就继续往下看,没有那就出门右(别)拐(走)吧。一开始想着如果和swiper.js一样,那就好了,看了下文档就放弃了。网上找了一下还是没找到具体实现方法,就开始自己倒腾,就想到几个办法,看客们讲究着试试吧。第一种效果 普通的间隔轮播1:wxmlview class='test'    swiper  display-multiple-items='1'    // 这里是设置显示一张      block wx:for="{{imgUrls}}"             // 遍历js中的图片        swiper-item// box外层swiper          view class='box'// 重点处理box            image src='{{item}}'/image            view class='content'              text测试/text            /view          /view        /swiper-item      /block    /swiper/view

2:wxss.test{  width: 100%;  height: 100vh;  box-sizing: border-box;}swiper{  height: 100%;}.content{  font-size: 16px;  color: #333;  padding: 20rpx 40rpx;}swiper-item{// 此时的swiper-item是占据一个页面的  text-align: center;   // 让其中的内容居中显示}swiper-item image{  width: 100%;}.box{// box设置宽高(更具设计稿自定义吧)  width: 80%;  height: 700rpx;  display: inline-block;  margin-top: 40px;  box-sizing: border-box;  box-shadow: 0 0 4px 4px #f2f2f2;  // 给box添加阴影效果更显著}

这种实现是利用css来间接达到轮播间距的效果:swiper利用display-multiple-items=’1’属性  一次展示一张swiper-item添加内容居中内容设置宽高最后就可以得到一次一张且有间距的轮播图第二种效果  带边界的间隔轮播依旧按照上面的css不用大改,改已改box的宽度即可,按照你想要的效果去设置大小。.box{  width: 90%;  }

只需要在swiper组件上加两个属性,来达到预留空间给里面box。在加上circular属性衔接滑动(无缝连接)。第三种效果  两边小中间大动画轮播1:wxmlview class='test'    swiper  display-multiple-items='1' 开通鱼粮小程序电话:4006-838-530circular previous-margin='50px' next-margin='50px' bindchange='change' current='{{current}}'      block wx:for="{{imgUrls}}" wx:key='{{index}}'        swiper-item 开通桌布小程序电话:4006-838-530         view class="box" data-index='{{index}}' animation="{{index == current?animationData:animationData2}}"            image src='{{item}}'/image        开通柚子茶小程序电话:4006-838-530    view class='content'              text测试/text              text测试/text            /view          /view        /swiper-item      /block    /swiper/view

2:wxss.test{  width: 100%;  height: 100vh;  box-sizing: border-box;}swiper{  height: 100%;}.content{  font-size: 16px;  color: #333;  padding: 20rpx 40rpx;}swiper-item{  text-align: center;}swiper-item image{  width: 100%;}.box{  width: 90%;  height:600rpx;  display: inline-block;  margin-top: 40px;  box-sizing: border-box;  box-shadow: 0 0 4px 4px #f2f2f2;  position:relative;  top:33%;  transform:translateY(-45%);}

3.js 利用animate来过渡动画,当下标相同的额时候执行放大的动画Page({  /**   * 页面的初始数据   */  data: {    imgUrls: [      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'    ],    current: 0,    animationData: {},    animationData2: {}  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    this.stretch(350)  },  change(e){    this.setData({      current: e.detail.current    })    this.stretch(350)        this.shrink(300)  },  // 收缩  stretch(h){    var animation = wx.createAnimation({      duration: 1000,      timingFunction: 'ease',    })    this.animation = animation    animation.height(h).step()    this.setData({      animationData: animation.export(),    })  },  // 展开  shrink(h){    var animation2 = wx.createAnimation({      duration: 1000,      timingFunction: 'ease',    })    this.animation2 = animation2    animation2.height(h).step()    this.setData({      animationData2: animation2.export()    })  },})

以上就是三种轮播实现的方式,如果有疑问的可以下面留言,或者你有更好的方法,可以留言,邮箱发送

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 【小程序】禄丰县E企盈小程序小程序swiper组件实现间距轮播
分享到: 更多 (0)

评论 抢沙发

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏