微信小程序_(视图)简单的swiper容器
swiper容器效果 官方文档:传送门
swiper容器可实现简单的轮播图效果
结构程序
Page({ /**
* 页面的初始数据
*/
data: { }, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }, change:function(e){
console.log(e);
}
})
test.js
Gary 微信小程序
<swiper indicator-dots="true" autoplay="true" current="2" interval="2000"
bindchange="change">
<swiper-item><view class = "item bc_green">0</view></swiper-item>
<swiper-item><view class = "item bc_red">1</view></swiper-item>
<swiper-item><view class = "item bc_blue">2</view></swiper-item>
</swiper>
test.wxml
swiper{
height:300px;
width:100%;
} .bc_green{
background:green;
} .bc_blue{
background:blue;
} .bc_red{
background:red;
} .item{
width:100%;
height:100%;
} swiper-item{
border:1px solid black;
} .item{
width:100%;
height:100%;
font-size:20px;
color:#ffffff;
}
test.wxss
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
app.json
实现过程
添加swiper容器属性
swiper
indicator-dots="true" 是否显示面板指示点
autoplay="true" 是否自动切换
current="2" 当前所在滑块的 index(下标为0开始)
interval="2000" 自动切换时间间隔(默认5000ms)
bindchange="change" 绑定轮播事件触发时调用的函数
duration 滑动动画时长(默认500s)
添加“轮播”内容
<swiper-item><view class = "item bc_green">0</view></swiper-item>
<swiper-item><view class = "item bc_red">1</view></swiper-item>
<swiper-item><view class = "item bc_blue">2</view></swiper-item>
绑定轮播事件触发时的函数
change:function(e){
console.log(e);
}
微信小程序_(视图)简单的swiper容器的更多相关文章
- 微信小程序_(视图)简单的scroll-view容器
scroll-view容器效果 官方文档:传送门 scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许 ...
- 微信小程序_(map)简单的小地图
map地图效果 官方文档:传送门 Page({ data: { markers: [{ iconPath: "/resources/others.png", id: 0, lati ...
- 微信小程序_(案例)简单中国天气网首页
Demo:简单中国天气网首页 Page({ data:{ name:"CynicalGary", temp:"4", low:"-1°C", ...
- 微信小程序_(校园视)开发视频的展示页_下
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(校园视)开发用户注册登陆
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序的轮播图swiper问题
微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...
- 微信小程序把玩(十)swiper组件
原文:微信小程序把玩(十)swiper组件 Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScroller ...
- 微信小程序 wxs的简单应用
Demo地址:微信小程序wxs的简单应用 案例分析 张三.李四.王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量, list数据结构如下,当我们使用wx:for进行显示时,发现个 ...
- 微信小程序_(校园视)开发上传视频业务
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
随机推荐
- 2019中山纪念中学夏令营-Day21[JZOJ]
2019中山纪念中学夏令营-Day21[JZOJ] 提高组(B组模拟赛)Team_B (由于本人太弱,并没有订正完题目) (题解大部分是从官方题解文件上摘来的) 日常膜拜大神:じやゆん蒟蒻 正文部分: ...
- python-redis-订阅和发布
发布:redishelper.py import redis class RedisHelper: def __init__(self): self.__conn = redis.Redis(host ...
- 在Windows下安装BIND作为DNS服务器(模拟网站比较有用)
本文参考了CU下的一篇帖子,感谢:) 1.下载BIND http://ftp.isc.org/isc/bind9/9.4.3/BIND9.4.3.zip 2.安装 下载回来是zip的压缩包,解压 ...
- solr学习笔记-导入mysql数据
操作系统:LINUX CENTOS 6.7 solr安装目录:/usr/local/solr-6.1.0 1.准备工作: 1.1.创建数据表: CREATE TABLE `mytable` ( `id ...
- Collection接口的子接口——Set接口
https://docs.oracle.com/javase/8/docs/api/java/util/Set.html public interface Set<E> extends ...
- expdp使用
原文:https://blog.csdn.net/zftang/article/details/6387325 ORACLE EXPDP命令使用详细相关参数以及导出示例: 1. DIRECTORY指定 ...
- sql server SQL 服务器 - RDBMS
SQL 服务器 - RDBMS --现代的 SQL 服务器构建在 RDBMS 之上. DBMS - 数据库管理系统(Database Management System) --数据库管理系统是一种可以 ...
- numpy:np.random.seed()
np.random.seed()函数可以保证生成的随机数具有可预测性. 可以使多次生成的随机数相同 1.如果使用相同的seed( )值,则每次生成的随即数都相同: 2.如果不设置这个值,则系统根据时间 ...
- 098、Swarm 如何实现 Failover (Swarm05)
参考https://www.cnblogs.com/CloudMan6/p/7898245.html 故障是在所难免的,容器可能崩溃,Docker Host 可能宕机,不过幸运的是,Swarm 已 ...
- dubbo-admin监控搭建2.6.0版本
首先介绍一下dubbo的一个比较大的改变,那就是在2.6.1及2.6.1以后的版本当中,dubbo将一分为二,分为Dubbo-RPC和Dubbo-Admin,而在2.6.1以前的版本中Dubbo-Ad ...