首页 > 分享 > 微信小程序 swiper + scroll

微信小程序 swiper + scroll

花匠小妙招
2024-12-21 06:23

最近用 swiper + scroll-view 做了一个好玩的（提升用户体验）看下图

在这里插入图片描述

很多 app 中都有具体应用场景 (微信小程序订单) (淘宝首页) (QQ 音乐)

在这里插入图片描述

我在小程序中的应用

在这里插入图片描述

show me the code

1234567891011121314151617181920212223

.all {height: 100vh;width: 100%;display: flex;flex-direction: column; } .bigTitle {color: #fff;background-color: #07c160; } .head-title {display: flex;flex-direction: row;justify-content: space-around;align-items: center;height: 100rpx; } .head-title view {height: 100rpx;line-height: 100rpx;padding: 0 50rpx; } swiper {/* background-color: yellow; */width: 100%;flex: 1; } scroll-view {background-color: red;height: 100%;width: 100%; }

12345678910111213141516171819202122232425262728293031323334353637

Page({data: {headOneTitle: 'bigTitle',headTwoTitle: '',currentNum: 0},// 设置　head title stylesetHeadTitle: function (a) {console.log(a)if (a) {this.setData({headOneTitle: '',headTwoTitle: 'bigTitle',})} else {this.setData({headOneTitle: 'bigTitle',headTwoTitle: '',})}},swiperChanged: function (e) {let a = e.detail.current;this.setHeadTitle(a);},clickHead: function () {if (!this.data.headOneTitle) {this.setData({currentNum: 0})} else {this.setData({currentNum: 1})}} })

12345678910111213141516171819202122232425262728293031323334353637383940414243 用户体验上

在这里插入图片描述

喜欢或对你有帮助，请点个赞吧。有错误或者疑问还请评论指出。我的个人网站 --> 点击访问。 END 写完这个博客，发现 csdn 上早有前辈分享。 2021-02-21 改了一个三个的（html css js 我就不分开了）

<view class="all"><view class="head" bindtap="onClickHead"><block wx:for="{{ list }}" wx:key="_id"><view class="{{ item.active ? 'green' : '' }}" data-index="{{ item.id }}">{{ item.title }}</view></block></view><swiper current="{{ currentNum }}" bindchange="swiperChanged"><swiper-item><scroll-view scroll-y="true"><view>A</view><view>A</view></scroll-view></swiper-item><swiper-item><scroll-view scroll-y="true"><view>B</view><view>B</view></scroll-view></swiper-item><swiper-item><scroll-view scroll-y="true"><view>C</view><view>C</view></scroll-view></swiper-item></swiper> </view> .all {height: 100vh;width: 100%;display: flex;flex-direction: column; } .head {display: flex;flex-direction: row;justify-content: space-around;align-items: center;height: 100rpx; } .head view {height: 100rpx;line-height: 100rpx;flex: 1; } .green {background-color: #07c160 !important; } swiper {/* background-color: yellow; */width: 100%;flex: 1; } scroll-view {background-color: red;height: 100%;width: 100%; } Page({data: {currentNum: 0,list: [{id: 0,title: 'A',active: true},{id: 1,title: 'B',active: false},{id: 2,title: 'C',active: false},// {//id: 3,//title: 'D',//active: false// },]},// reSet head active stylereSetHeadActive: function () {for (let i = 0; i < this.data.list.length; i ++) {// console.log(this.data.list[i])if ( this.data.list[i].active === true ) {let temp = "list[" + i + "].active"this.setData({[temp]: false})}}},// set head active stylesetHeadActive: function (a) {console.log('change to', a)this.reSetHeadActive()let temp = "list[" + a + "].active"this.setData({[temp]: true})},swiperChanged: function (e) {let a = e.detail.current;this.setHeadActive(a);},onClickHead: function (e) {console.log('tap num', e.target.dataset.index)this.setData({currentNum: e.target.dataset.index})} })

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161