(转)微信小程序swiper扩展左右滑动两边各显示一半其它的item

转： [dliberty]

(https://me.csdn.net/dliberty)

wxml 代码
使用next-margin和previous-margin控制露出前后的一小部分
外层li控制两个相邻的item之间的留白
里层li1控制item的显示元素


<swiper class="swiper" next-margin="140rpx" current-item-id="{{currentItemId}}" previous-margin="140rpx" bindchange="swiperChange">  <block wx:for="{{backClass}}" wx:key="index"><swiper-item item-id="{{index}}" data-item-id="{{index}}" bindtap='clickChange'>  <view class='li'><view class='li1 {{item}} {{currentItemId == index ? "selected" : ""}}' ></view></view> </swiper-item>  </block>
</swiper>

wxss 代码

.li{width: 100%;height: 252rpx;
}
.li1{width: 446rpx;margin: 0 auto;border-radius: 10rpx;height: 252rpx;transform: scale(0.9);
}
.selected{transform: scale(1)
}
.red{background: red;
}
.blue{background: blue;
}
.green{background: green;
}
.orange{background: orange;
}

js代码
可左右滑动切换可点击切换
左右滑动和点击切换获取currentItemId，以控制当前选择的item及选中效果


Page({data: {backClass: ["red", "blue", "green","orange"],currentItemId:2},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})}
})

作者：dliberty
来源：CSDN
原文：https://blog.csdn.net/dliberty/article/details/83061047

(转)微信小程序swiper扩展左右滑动两边各显示一半其它的item相关推荐

微信小程序—swiper轮播图图片不显示的解决方法
swiper轮播图图片不显示的解决方法遇到图片无法显示的问题,是样式问题在wxss里面新型修改设置宽度 .container{width: 750rpx; } .container swiper ...
php 小程序轮播图,微信小程序swiper组件构建轮播图代码分享
本文主要和大家介绍微信小程序 swiper组件构建轮播图的实例的相关资料,如有疑问请留言或者到本站社区交流讨论,需要的朋友可以参考下,希望能帮助到大家. 微信小程序 swiper组件构建轮播图的实例 ...
swiper高度自适应_微信小程序swiper高度自适应
微信小程序swiper高度自适应的实现方式,首先swiper默认最小高度150,下面请看开发实例. 要求:swiper高度自适应 wxml wxss .swiper image { width: 10 ...
绑定bindchange事件的微信小程序swiper闪烁，抖动问题解决，（将微信小程序切换到后台一段时间，再打开微信小程序，会出现疯狂循环轮播，造成抖动现象）
绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象) 参考文章: (1)绑定bindchang ...
微信小程序禁止页面左右滑动
微信小程序禁止页面左右滑动小程序禁止页面左右滑动 PS:在开发过程中可能会遇到某一个页面可以左右滑动,在开发者工具是查看不出来,只有在手机预览才可以看的出来(尝试左或者右滑动). 我的解决方法是在根 ...
微信小程序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 ...
微信小程序顶部搜索框滑动伸缩效果的实现
项目场景:微信小程序顶部搜索框随页面滑动伸缩效果提示:实现搜索框跟随用户滑动页面,实现伸缩效果微信小程序顶部搜索框滑动伸缩动画的实现实现效果: 滑动前滑动后实现原理提示:主要用到了微信小 ...

(转)微信小程序swiper扩展左右滑动两边各显示一半其它的item

转： [dliberty]

(转)微信小程序swiper扩展左右滑动两边各显示一半其它的item相关推荐

最新文章

热门文章