微信小程之swiper
这篇文章主要介绍微信小程序swiper的相关资料,需要的朋友可以参考下
swiper滑块视图容器，适合广告位展示、商品详情展示等等；
一．图片轮播
下面先给一个简单的示例，效果图如下图所示：
1.html结构
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{swiper}}">
<swiper-item>
<view class="swiper-slide">
<image src="{{item.src}}" class="slide-image width-full" height="350" />
</view>
</swiper-item>
</block>
</swiper>
2. 样式
.swiper-slide image {
height:500rpx;
}
.width-full {
width:100%;
}
3. js
Page({
data: {
loadingHidden: false,
vertical: false,
autoplay: true,
indicatorDots: true,
interval: 2000,
duration: 500,
swiper: [
{
"src": "/images/goods_details_01.jpg",
},
{
"src": "/images/goods_details_02.jpg",
},
{
"src": "/images/goods_details_03.jpg",
},
],
},
//active点切换
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
//是否自动切换
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},
//自动切换时间间隔
intervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
//滑动动画时长
durationChange: function (e) {
this.setData({
duration: e.detail.value
})
},
}）
以上是一些轮播的基本设置，下面介绍一些其它的实用属性：
indicator-color：设置指示点的的颜色；
indicator-active-color：设置当前选中点的颜色；
circular：是否采用衔接滑动；
vertical：滑动方向是否为纵向，初始值为false
二、数字切换轮播图，效果如下图所示：
1、html结构
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{swiper}}">
<swiper-item>
<view class="swiper-slide">
<image src="{{item.src}}" class="slide-image width-full" mode="widthFix" />
<view class="swiper-num">
<text>{{item.num}}/{{swiper.length}}</text>
</view>
</view>
</swiper-item>
</block>
</swiper>
2、样式
.swiper-slide image {
height:500rpx;
}
.width-full {
width:100%;
}
.swiper-num
position:absolute;
bottom:30rpx;
right:30rpx;
background-color:rgba(112,128,144, 0.3);
font-size:28rpx;
line-height:40rpx;
height:40rpx;
padding:0 20rpx;
color:#fff;
}
3. js
Page({
data: {
loadingHidden: false,
vertical: false,
autoplay: true,
indicatorDots: true,
interval: 2000,
duration: 500,
swiper: [
{
num: 1,
"src": "/images/goods_details_01.jpg",
},
{
num: 2,
"src": "/images/goods_details_02.jpg",
},
{
num: 3,
"src": "/images/goods_details_03.jpg",
},
],
},
//active点切换
changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
//是否自动切换
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},
//自动切换时间间隔
intervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
//滑动动画时长
durationChange: function (e) {
this.setData({
duration: e.detail.value
})
},
}）
微信小程之swiper相关推荐
- 绑定bindchange事件的微信小程序swiper闪烁，抖动问题解决，（将微信小程序切换到后台一段时间，再打开微信小程序，会出现疯狂循环轮播，造成抖动现象）
绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象) 参考文章: (1)绑定bindchang ...
- 微信小程序swiper不限数量不卡顿
详情见:微信小程序swiper不限数量不卡顿轮播图优化组件(含uniapp版和纯微信开发者工具版),欢迎打包下载啦_swiper小程序插件_KV_T的博客-CSDN博客
- 微信小程序swiper图片尺寸_微信小程序 swiper 轮播图 高度自适应
微信小程序 swiper 轮播图 高度自适应 发布时间:2018-07-20 15:34, 浏览次数:588 , 标签: swiper 小程序中使用swiper 组件 ,实现轮播图高度自适应效果. 先 ...
- 微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件 在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
- php 小程序轮播图,微信小程序swiper组件构建轮播图代码分享
本文主要和大家介绍微信小程序 swiper组件构建轮播图的实例的相关资料,如有疑问请留言或者到本站社区交流讨论,需要的朋友可以参考下,希望能帮助到大家. 微信小程序 swiper组件构建轮播图的实例 ...
- swiper高度自适应_微信小程序swiper高度自适应
微信小程序swiper高度自适应的实现方式,首先swiper默认最小高度150,下面请看开发实例. 要求:swiper高度自适应 wxml wxss .swiper image { width: 10 ...
- 微信小程序swiper组件宽高自适应方法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 我把 swiper 的 width 设定成了屏幕的95%宽度, 如果想宽度也自适应的话请改成 wid ...
- 微信小程序轮播中的current_微信小程序 swiper轮播图的按钮切换
一.前言 swiper组件自带autoplay切换,本文将会介绍如何用到左右按钮切换轮播图,以及如何解决快速点击按钮出现的bug. 核心属性 circular: 负责切换衔接的效果(否则最后一张与第一 ...
- 微信小程序swiper滑块视图容器控件使用整理
2019独角兽企业重金招聘Python工程师标准>>> 一.默认使用 indicator-dots,指示是否面板显示 indicator-color,指示点颜色 indicator- ...
最新文章
- 和我一起打造个简单搜索之SpringDataElasticSearch入门
- 3天，把MySQL索引、锁、事务、分库分表撸干净了！
- 借贷记账法下的账户对应关系_事业单位改用的借贷记账法
- 成员缩写_青春有你2snh48成员都有谁 10名SNH48女团成员介绍
- iOS推送小结--swift语言
- java pollfirst_Java BlockingDeque pollFirst()用法及代码示例
- 反射 java 例子 get_Java反射实例
- 公共云存储服务的可扩展性和性能
- Chrome浏览器书签同步插件floccus与坚果云的协同使用方法
- Unity Shader-后处理：简单的颜色调整（亮度，饱和度，对比度）
- ＜el-descriptions＞无法使用的问题
- JavaScript高级程序设计（第4版）学习随笔【第五章】
- 冒泡排序从左到右 从右到左方法实现(三种方法)
- BJD CTF 2nd web wp
- linux下mysql的配置,Linux下Mysql配置()
- matlab高精度工具箱,[转载]高精度捷联惯性导航系统Matlab工具箱
- 进程与进程描写叙述符（task_struct）
- 入手域名可以通过哪些方式?
- c语言initializers,too many initializers
- 十五、SpringBoot2核心技术——web开发(模块引擎Thymeleaf)_下