微信小程序_(视图)简单的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进行显示时,发现个 ...
- 微信小程序_(校园视)开发上传视频业务
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
随机推荐
- spark教程(一)-集群搭建
spark 简介 建议先阅读我的博客 大数据基础架构 spark 一个通用的计算引擎,专门为大规模数据处理而设计,与 mapreduce 类似,不同的是,mapreduce 把中间结果 写入 hdfs ...
- Codeforces 1194B. Yet Another Crosses Problem
传送门 直接枚举填满哪一行,然后看看这一行填满以后哪一列最小 这个预处理一下 $cnt[i]$ 表示初始时第 $i$ 列有几个位置填满就可以做到 $O(m)$ 对于所有情况取个 $min$ 就是答案, ...
- Scala学习二——控制结构和函数
一.if表达式有值 val s=if(x>0) 1 else -1,相当于Java中x>0?1:-1(不过不拿呢个在?:中插入语句),而且Scala中可以用混合类型(如if (x>0 ...
- JavaSE--jdbc编程
JDBC全称为:Java Data Base Connectivity (java数据库连接),可以为多种数据库提供统一的访问.JDBC是sun开发的一套数据库访问编程接口,是一种SQL级的API.它 ...
- iview发布到IIS 路由问题
<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.we ...
- FastDFS整合Nginx的模块:fastdfs-nginx-module报错:fdfs_define.h:15:27: 致命错误:common_define.h:没有那个文件或目录
错误提示: /usr/include/fastdfs/fdfs_define.h:15:27: 致命错误:common_define.h:没有那个文件或目录 [解决办法] 1.编辑fastdfs-ng ...
- Oracle DBA 学习总结
对于学习Oracle 数据库,应该先要了解Oracle 的框架.它有物理结构(由控制文件.数据文件.重做日志文件.参数文件.归档文件.密码文件组成) ,逻辑结构(表空间.段.区.块),内存分配( SG ...
- 【异常】~/.bash_profile:source:44: no such file or directory: /usr/local/Cellar/nvm/0.34.0/nvm.sh
1 异常信息 /Users/zhangjin/.bash_profile:source:: no such file or directory: /usr/local/Cellar/nvm//nvm. ...
- 2.flask模板--jinja2
1.jinja2模板介绍和查找路径 import os from flask import Flask, render_template # 之前提到过在渲染模板的时候,默认会从项目根目录下的temp ...
- springmvc自定义异常处理类和<mvc:annotation-driven/>自带异常处理优先级问题
自定义异常类的优先级低于注解驱动的默认异常处理,所以可以给自定义异常处理类,实现一个排序的接口, org.springframework.core.Ordered 改接口的注释: /** * {@c ...