微信小程序轮播中的current_微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了。
微信小程序提供swiper组件,官网api提供的swiper滑块视图容器。
属性名类型默认值说明
autoplay
Boolean
false
是否自动切换
current
Number
0
当前所在页面的 index
interval
Number
5000
自动切换时间间隔
duration
Number
500
滑动动画时长
circular
Boolean
false
是否采用衔接滑动
vertical
Boolean
false
滑动方向是否为纵向
bindchange EventHandle
current 改变时会触发 change 事件,event.detail = {current: current, source: source}
从公共库v1.4.0开始,change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下:
autoplay 自动播放导致swiper变化;
touch 用户划动引起swiper变化;
其他原因将用空字符串表示。
注意:其中只可放置组件,否则会导致未定义的行为。
swiper-item
仅可放置在组件中,宽高自动设置为100%。
index.wxss
swiper {
height: 421.5rpx;
}
swiper-item image {
width: 100%;
height: 100%;
}
.swiper-container{
position: relative;
}
.swiper-container .swiper{
height: 300rpx;
}
.swiper-container .swiper .img{
width: 100%;
height: 100%;
}
index.js
Page({
data: {
swiperCurrent: 0,
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 800,
circular:true,
imgUrls: [
'https://p3.pstatp.com/large/43700001e49d85d3ab52',
'https://p3.pstatp.com/large/39f600038907bf3b9c96',
'https://p3.pstatp.com/large/31fa0003ed7228adf421'
],
links:[
'../user/user',
'../user/user',
'../user/user'
]
},
//轮播图的切换事件
swiperChange: function (e) {
this.setData({
swiperCurrent: e.detail.current
})
},
//点击指示点切换
chuangEvent: function (e) {
this.setData({
swiperCurrent: e.currentTarget.id
})
},
//点击图片触发事件
swipclick: function (e) {
console.log(this.data.swiperCurrent);
wx.switchTab({
url: this.data.links[this.data.swiperCurrent]
})
}
})
index.wxml
重要一点是图片的点击事件。bindtap="swipclick"
swipclick: function (e) {
console.log(this.data.swiperCurrent);
wx.switchTab({
url: this.data.links[this.data.swiperCurrent]
})
}
微信小程序轮播中的current_微信小程序轮播图相关推荐
- 微信小程序轮播中的current_微信小程序 swiper轮播图的按钮切换
一.前言 swiper组件自带autoplay切换,本文将会介绍如何用到左右按钮切换轮播图,以及如何解决快速点击按钮出现的bug. 核心属性 circular: 负责切换衔接的效果(否则最后一张与第一 ...
- 微信小程序轮播中的current_微信小程序开发之自定义轮播图实例
轮播图是大部分应用的一个常用的功能,常用于广告投放.产品展示.活动展示等等. 漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用. 废话少说,下面开始动手. 业务需求: 5个图片轮番播放,可以左右 ...
- 中达优控一体屏台达程序,包含中达优控屏程序
中达优控一体屏台达程序,包含中达优控屏程序,plc程序,程序 结构清晰,注释完整 ID:3618643532025121工业自动化
- 小程序开发工具中黑马优购小程序tabs组件_别不信,二十一天巧妙精通微信小程序的开发,附赠教程...
资料简介: 这是一本帮助编程爱好者和从业人员从零开始学习微信小程序设计的书.本书紧跟微信小程序的技术发展,是目前在该领域率先进行系统的技术探讨和培训的著作. 本书站在学习的角度,目的是让学习者通过21 ...
- 小程序开发工具中黑马优购小程序tabs组件_还觉得小程序开发很难?这几款小程序开发工具小白都能用哦!...
玩过H5,微海报,直播之后-紧跟时代潮流的品牌公关狗们总是会在第一时间去研究时下最in的营销工具.而自从微信小程序公测之后,很多小伙伴也是中毒不浅,但是在技术开发的问题上,却不知道该如何下手.作为不会 ...
- 游戏无法启动此程序因为计算机中丢失,无法启动此程序因为计算机中丢失*.dll 看完你就知道了...
如果在使用电脑的时候遇到"无法启动此程序因为计算机中丢失*.dll"该种情况时,应该怎么解决呢?今天我们一起来看一下怎么操作. 操作方法 01 首先我们去网上下载,或者直接到别人计 ...
- 微信小程序轮播中的current_手把手教你美化微信小程序中的轮播效果
微信小程序现在依然很火,相信大家有目共睹:所以作为前端开发者,掌握如何开发小程序,是一项必备技能了,你觉得呢? 相对于PC和H5开发,小程序坑很多,所以需要慢慢"踩",被坑多了,路 ...
- 微信小程序轮播中的current_开源 | 微信接龙小程序 wechatsolita 开源
|一个基于微信的接龙小程序,开箱即用. 功能说明 发起接龙 - 简单易用,分「活动」及「拼团」两种类型,可设置报名上限 接龙报名 - 报名参加活动,拼团类活动能够自动计算金额 报名确认 - 活动创建者 ...
- 卡包 php,微信卡券,在卡包中跳转到小程序的字段怎么填写
期望实现的功能微信卡券领取到卡包之后,点立即兑换按钮跳转到小程序 这是官方文档的说明: 卡券内跳转小程序 场景介绍 商户创建卡券时可以将卡.券内的服务入口设置进入小程序服务. 步骤 1.开发者须将小程 ...
最新文章
- idea maven项目下载源码及关联源码
- 华为计算机如何计算sina,一道华为的“简单四则运算”题
- 金古桥机器人_《泽塔奥特曼》奥特曼憋屈了,被机器人保护,金古桥可能才是主角...
- 财付通接口(asp)
- 复习上学期的HTML CSS(1)
- 在51单片机上使用递归的注意事项
- 开发smartphone应用,无法生成cab文件?
- 数学之美札记:自然语言处理——从规则到统计
- 【NOIP2000】【Luogu1019】单词接龙
- VS2010中打开项目中的Winform界面报“This method explicitly users CAS policy,which has been obsoleted...”(续)
- java发送邮件带图片和附件
- UVM中的sequencer
- 各位大神,有没有类似于百度云软件开始时的设置向导的例子呀
- 我的python3.0 + RIDE搭建之路 ---全是血泪史
- substr函数c语言实现,substr是什么函数?怎么用
- 提取TCGA 中体细胞突变数据的表达矩阵
- 以太坊学习路线——(二、下)以太坊编程接口:web3.js
- Google搜索的10个小技巧,部分适用于百度
- 基于HTML+CSS实现的可交互照片墙Web页面
- HTTP世界全览(下):与HTTP相关的各种协议