最新时时彩平台演示 中新时时彩要不要交税 新时时彩三星组六技巧 最新时时彩源码修改 新时时彩遗漏走势图 新时时彩预测方法 新时时彩计算器 新时时彩开奖皇冠网址 新时时彩组三怎么玩 最新时时彩后四稳赚 新时时彩官方开奖网站 新时时彩人工计划 新时时彩开奖漏洞 新时时彩最长遗漏 新时时彩中奖顺序 360新时时彩技巧-轴承资讯 新时时彩停售 最新时时彩杀号高手 新时时彩三星走势图 玩新时时彩有什么技巧 新时时彩3星和尾走势 新时时彩后一公式 重新时时彩网站 新时时彩遗漏统计软件 吉林新时时彩走势图 新时时彩中奖怎么查 新时时彩是什么地方 新时时彩中奖怎么查 新时时彩下载手机版下载 新时时彩贴吧 最新时时彩计划软件 大赢家新时时彩 新时时彩注册送彩金 新时时彩组选投注技巧 新时时彩走势图 新时时彩万能5码 新时时彩模拟 新疆新时时彩往期开奖号码 新时时彩的玩法 新时时彩稳赚计划 最新时时彩70注 新时时彩返奖率 新时时彩杀号定胆360 新时时彩后二杀号 新时时彩振幅走势 最新时时彩教程 新时时彩后台软件 新时时彩几点开始 新时时彩日赚几百 最新时时彩注册送20
用户
 ?#19968;?#23494;码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序内置组件swiper,circular(衔接)使用小技巧

Rolan 2018-1-19 00:24

swiper,关于滑块的一些效果无缝,断点,视差等等...我想这里就不用做太多的赘述,这里给大家分享一下实战项目中使用circular(衔接)的一点小特性、小技巧,当然你也可以理解为遇到了一个小坑,因为不能把整个项目 ...

swiper,关于滑块的一些效果无缝,断点,视差等等...我想这里就不用做太多的赘述,这里给大家分享一下实战项目中使用circular(衔接)的一点小特性、小技巧,当然你也可以理解为遇到了一个小坑,因为不能把整个项目搬上来,所以这里用一个小事例去简单的描述一下。

功能介绍

swiper滑块视图容器(轮播效果)

可配置项

这里只简单列出示例中所需的一些属性,如需了解更多 【请点击,了解更多详情】

indicatorDots: true, //  是否显示面板指示点
    autoplay: false, // 是否自动切换
    circular: true, // 是否采用衔接滑动
    current: 0, // 当前所在页面的 index
    interval: 500, // 自动切换时间间隔
    duration: 500 // 滑动动画时长

示例

场景

类答题效果,答对本题自动跳转下一题,并保持滑块的衔接效果(这里我们用按钮?#21019;?#26367;自动跳转)

WXML:

<page>
        <view class='wrap-swiper'>
          <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" current="{{current}}" bindchange='testDetails' indicator-active-color='#fff'>
            <block wx:for="{{imgUrls}}" wx:key="key">
         <swiper-item>
           <image src="https://user-gold-cdn.xitu.io/2018/1/15/160f8b440965adf5" class="slide-image" width="355" height="150" />
         </swiper-item>
            </block>
          </swiper>
          <view class="wrap">
           <button bindtap='nextPage'>跳转下一题</button>
          </view>
        </view>
</page>

WXSS:

swiper{
  width: 80%;
  margin: 0 auto;
  margin-top: 20%;
  padding-top: 25px;
}
.wrap{
  display: flex;
  justify-content: space-around;
  margin-top: 25px;
}
.wrap-swiper{
  background: rgba(0,0,0, 0.1) ;
  padding-bottom: 25px;
  margin-left: 15px;
  margin-right: 15px;
}

JS:

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'
    ],
    indicatorDots: true, //  是否显示面板指示点
    autoplay: false, // 是否自动切换
    circular: true, // 是否采用衔接滑动
    current: 0, // 当前所在页面的 index
    interval: 500, // 自动切换时间间隔
    duration: 500 // 滑动动画时长
  },
  testDetails (e) {
    // bindchange事件
    console.log(e)
  },
  nextPage () {
    // 跳转下一题
     let current = this.data.current
     current++
     if (current > 2) {
      current = 0
     }
  }
})

运行效果:


对比

通过上述,首先我们看到,当我们左右滑动时候,衔接效果是没有毛病的,但是当我们去模拟跳转的时候,问题出现了,衔接失效?这究竟是怎么回事呢?现在我们就来看一下在bindchange事件(testDetails)的两次log中发生了什么?

问题

如上图所属,source(来源) 出现问题,模拟跳转改变current方式改变了内部衔接跳转的机制,那既然知道原因,那下一步的就要考虑如?#25991;?#25311;swiper内部的机制动作,那?#25351;?#22914;?#25991;?#25311;呢?就要从autoplay这个内置属性操刀了,废话不说直接上代码!

JS(修改后)

小特性: 主动触发swiper的autoplay特性,检测bindchange事件的source来源,做动态动态关闭处理

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'
    ],
    indicatorDots: true, //  是否显示面板指示点
    autoplay: false, // 是否自动切换
    circular: true, // 是否采用衔接滑动
    current: 0, // 当前所在页面的 index
    interval: 500, // 自动切换时间间隔
    duration: 500 // 滑动动画时长
  },
  testDetails (e) {
    console.log(e)
    if (e.detail.source == 'autoplay') {
      this.setData({
        autoplay: false
      })
    }
  },
  nextPage () {
    // 跳转下一题
    this.setData({
      autoplay: true
    })
  }
})

对比log(修改后)

运行效果(修改后)

跑起来瞅一眼

总结

本篇文章更多的是对于一些用法的分享,简单的特性说明,更深层次的内容,有兴趣的道友还是可以去研究下的,另外欢迎大家关注点赞,多谢!(?#20013;?#26356;新中...)

(注:封面来源于互联网,如有侵权,请联系作者删除;如需转载,请附原文链接及署名,多谢)

鲜花
鲜花 (3)
鸡蛋
鸡蛋

刚表态过的朋友 (3 人)

分享至 : QQ空间
收藏
原作者: 依旧优雅 来自: 掘金

相关阅读

  • 开发工具 2018-9-29 15:46
    《微信小程序自动切片生成布局软件》原来?#20013;?#30340;这部分工作,可以用切片软件的方法来?#23567;?#20999;好后,可以自动生成wxml,wcss,js文件。
    效果图上的文字可以通过自动文字识别识别出来,提高录入的速度,减轻工作量。
    设计好的切片文件可以存档,以便下次需要的时候拿来重新编辑。只要有切片文件在,换了程序也可以修改和编辑。
    有任?#25105;?#38382;欢迎随时联系我们!
    Q  Q : 348961183
    如有打扰,请谅解!
    勿喷!谢谢!
新时时彩软件
安徽25选5昨天开奖号 波尔多酒庄名字 狂野亚马逊走势图 黑龙江36选7周即开奖 莱特币平台 国际米兰吧百度贴吧 白狮援彩金 新浪彩票合买平台 狗狗币交易 百慕大三角2鬼海漩涡 古墓奇兵 3月28日公牛vs热火