资讯专栏INFORMATION COLUMN

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

ziwenxie / 3131人阅读

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

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

功能介绍

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

可配置项

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

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

示例

场景

类答题效果,答对本题自动跳转下一题,并保持滑块的衔接效果(这里我们用按钮来代替自动跳转)

WXML:


        
          
            
         
           
         
            
          
          
           
          
        

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

运行效果:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/113115.html

相关文章

  • 程序内置组件swipercircular衔接使用技巧

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

    Jenny_Tong 评论0 收藏0
  • 程序内置组件swipercircular衔接使用技巧

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

    FrancisSoung 评论0 收藏0
  • 程序内置组件swipercircular衔接使用技巧

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

    chaos_G 评论0 收藏0
  • 微信程序组件swiper结合模板的使用

    摘要:微信小程序的组件今天学习了微信小程序的组件。参考官网和一新建模板在组件文件夹下新建一个模板文件。使用属性,作为模板的名字模板的唯一标识符,使用时用属性声明。然后在内定义代码片段,代码如下二使用模板在调用页面使用模板。 微信小程序的swiper组件 今天学习了微信小程序的swiper组件。参考官网template和swiper 一、新建模板 在组件文件夹components下新建一个模板...

    baiy 评论0 收藏0

发表评论

0条评论

ziwenxie

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<