相关文章推荐
聪明伶俐的围巾  ·  习近平与大学生在一起的那些温暖瞬间-学生工作 ...·  3 月前    · 
爱旅游的啤酒  ·  15年磨一剑:枪花《Chinese ...·  5 月前    · 
心软的水煮肉  ·  金山云上市雷军发公开信:All in ...·  6 月前    · 
悲伤的针织衫  ·  柚子猫cos麻衣学姐~_哔哩哔哩_bilibili·  9 月前    · 
暴躁的猴子  ·  新闻资讯-中国人民大学商学院MBA项目中心·  1 年前    · 
Code  ›  微信小程序----开发rui-swiper多样式轮播组件开发者社区
swiper 小程序 微信开发 轮播
https://cloud.tencent.com/developer/article/1782740
酒量小的葡萄酒
1 年前
作者头像
Rattenking
0 篇文章

微信小程序----开发rui-swiper多样式轮播组件

前往专栏
腾讯云
开发者社区
文档 意见反馈 控制台
首页
学习
活动
专区
工具
TVP
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP
返回腾讯云官网
社区首页 > 专栏 > Rattenking > 微信小程序----开发rui-swiper多样式轮播组件

微信小程序----开发rui-swiper多样式轮播组件

作者头像
Rattenking
发布 于 2021-02-01 11:00:47
613 0
发布 于 2021-02-01 11:00:47
举报

swiper详解

滑块视图容器。swiper的初始化高度为150px;swiper-item的初始高度和宽度为100%;都可通过css样式进行swiper、swiper-item的样式重置。 swiper原生组件详解

swiper组件开发

如何使用

到 GitHub 下载 WX-RUI 的代码,将 component 目录拷贝到自己的项目中。然后按照如下的方式使用组件,以 swiper 为例,其它组件在对应的文档页查看:

1. 添加需要的组件。在页面的 json 中配置(路径根据自己项目位置配置):
"usingComponents": {
  "rui-swiper": "../../component/swiper/swiper"
}
2. 在 wxml 中使用组件:

2.1 常规滑动轮播

<rui-swiper 
  swiperList="{{bannerList}}" 
  indicatorDots="true" 
  autoplay="true"
></rui-swiper>

2.2 衔接滑动轮播(循环滑动轮播)

<rui-swiper 
  swiperList="{{bannerList}}" 
  indicatorDots="true" 
  autoplay="true" 
  circular="true"
></rui-swiper>
效果图1 ---- 常规滑动轮播和循环滑动轮播
常规滑动轮播和循环滑动轮播
常规滑动轮播和循环滑动轮播

2.3 纵向滑动轮播

<rui-swiper 
  swiperList="{{bannerList}}" 
  indicatorDots="true" 
  autoplay="true" 
  vertical="true"
></rui-swiper>

2.4 纵向衔接滑动轮播(纵向循环滑动轮播)

<rui-swiper 
  swiperList="{{bannerList}}" 
  indicatorDots="true" 
  autoplay="true" 
  circular="true" 
  vertical="true"
></rui-swiper>
效果图2 ---- 纵向滑动轮播和纵向循环滑动轮播
纵向滑动轮播和纵向循环滑动轮播
纵向滑动轮播和纵向循环滑动轮播

2.5 后边距滑动

<rui-swiper 
  swiperList="{{bannerList}}" 
  indicatorDots="true" 
  autoplay="true" 
  imgwidth="90vw" 
  circular="true" 
  next-margin="30px"
></rui-swiper>

2.6 前后边距滑动轮播

<rui-swiper 
  swiperList="{{bannerList}}" 
  indicatorDots="true" 
  autoplay="true" 
  current='{{current}}' 
  isOpacity="true" 
  isScale="true"  
  imgwidth="82vw" 
  circular="true" 
  previous-margin="30px" 
  next-margin="30px" 
  rui-class="rui-banner-img" 
  bindswiperfinish='changeFun'
></rui-swiper>
效果图3 ---- 后边距滑动和前后边距滑动轮播
后边距滑动和前后边距滑动轮播
后边距滑动和前后边距滑动轮播

2.7 多图片滑动轮播

<rui-swiper 
  swiperList="{{bannerList}}" 
  circular="true" 
  autoplay="true" 
  display-multiple-items="2" 
  swiperheight="21.333vw" 
  imgheight="21.333vw" 
  imgwidth="50vw" 
  current='0'
></rui-swiper>

2.8 文字滑动导航

<rui-swiper 
  type="text" 
  class='rui-active' 
  swiperList="{{navList}}" 
  display-multiple-items="4" 
  swiperheight="12vw" 
  imgheight="12vw" 
  previous-margin="10px" 
 
推荐文章
聪明伶俐的围巾  ·  习近平与大学生在一起的那些温暖瞬间-学生工作部(处)、武装部
3 月前
爱旅游的啤酒  ·  15年磨一剑:枪花《Chinese Democracy》历程-搜狐音乐
5 月前
心软的水煮肉  ·  金山云上市雷军发公开信:All in 云服务要有向死而生的勇气 - 牛透社
6 月前
悲伤的针织衫  ·  柚子猫cos麻衣学姐~_哔哩哔哩_bilibili
9 月前
暴躁的猴子  ·  新闻资讯-中国人民大学商学院MBA项目中心
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号