微信小程序swiper显示左右两边内容
时间:2022-07-24
本文章向大家介绍微信小程序swiper显示左右两边内容,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<swiper class="swiper" next-margin="120rpx" previous-margin="120rpx" current="{{currentItemId}}"
bindchange="swiperChange" autoplay indicator-dots indicator-active-color="#0C6D4A" circular>
<block wx:for="{{expert_list}}" wx:for-item="item" wx:for-index="index" wx:key>
<swiper-item item-id="{{index}}" data-item-id="{{index}}" bindtap='clickChange'>
<view class='row'>
<view class="title">{{item.name}}</view>
<view class='col {{currentItemId == index ? "selected" : ""}}'>
<image src="{{item.img}}"> </image>
</view>
</view>
</swiper-item>
</block>
</swiper>
.swiper {
height: 1000rpx;
}
.row {
width: 100%;
height: 100%;
}
.title {
font-size: 36rpx;
text-align: center;
margin: 20rpx 0;
}
.col {
width: 480rpx;
margin: 0 auto;
height: 85%;
transform: scale(0.9);
border-radius: 10rpx;
}
.col image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.selected {
transform: scale(1);
box-shadow: 0px 0px 20rpx 5rpx #CCC;
}
data: {
currentItemId: 1,
expert_list: [{
name: '1',
img: 'http://sucai.suoluomei.cn/sucai_zs/images/20190911093001-1.jpg',
},
{
name: '2',
img: 'http://sucai.suoluomei.cn/sucai_zs/images/20191021145909-bg.png',
},
{
name:'3',
img:'http://sucai.suoluomei.cn/sucai_zs/images/20190920100012-1.jpg'
},
{
name:'4',
img:'http://sucai.suoluomei.cn/sucai_zs/images/20190910114143-630685d20d6b26aee30f43d76c77f161.jpg'
}
]
},
swiperChange: function (e) {
var currentItemId = e.detail.currentItemId;
this.setData({
currentItemId: currentItemId
})
},
clickChange: function (e) {
var itemId = e.currentTarget.dataset.itemId;
this.setData({
currentItemId: itemId
})
},
- JSON.stringify(), JSON.parse(), toJSON()方法使用
- compression功能测试
- 源码阅读再来一发:解读RGW中request的处理流程
- 绘制Crushmap分布图-Python
- RGW奇淫技巧-玩转system特权
- 源码走读rgw内置civetweb的参数初始化过程
- 重磅:Flume1-7结合kafka讲解
- 遍历删除List中的元素
- RGW Bucket Shard设计与优化-下
- RGW Bucket Shard设计与优化-中
- 实战phoenix
- WPF/Silverlight中的Command
- RGW Bucket Shard设计与优化-上
- 实弹军演-基于Ceph对象存储的实战兵法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浙大版《C语言程序设计(第3版)》题目集 练习5-2 找两个数中最大者
- 浙大版《C语言程序设计(第3版)》题目集 练习5-3 数字金字塔
- 浙大版《C语言程序设计(第3版)》题目集 习题5-1 符号函数
- 浙大版《C语言程序设计(第3版)》题目集 习题5-2 使用函数求奇数和
- 浙大版《C语言程序设计(第3版)》题目集 习题5-3 使用函数计算两点间的距离
- 浙大版《C语言程序设计(第3版)》题目集 习题5-4 使用函数求素数和
- Linux进程之如何查看进程详情?
- 浙大版《C语言程序设计(第3版)》题目集 习题5-5 使用函数统计指定数字的个数
- 浙大版《C语言程序设计(第3版)》题目集 习题5-6 使用函数输出水仙花数
- 浙大版《C语言程序设计(第3版)》题目集 习题5-7 使用函数求余弦函数的近似值
- 浙大版《C语言程序设计(第3版)》题目集 习题6-1 分类统计字符个数
- 微信群总是有人发广告?看我用Python写一个自动化机器人消灭他!
- 浙大版《C语言程序设计(第3版)》题目集 习题6-2 使用函数求特殊a串数列和
- 浙大版《C语言程序设计(第3版)》题目集 习题6-4 使用函数输出指定范围内的Fibonacci数
- 浙大版《C语言程序设计(第3版)》题目集 习题6-5 使用函数验证哥德巴赫猜想