在微信小程序实现横向滑动时,使用scroll-view标签,然后给它设置一个scroll-x,感觉就可以实现元素的横向排列,可以左右滑动。
官网文档如下所示
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
但是在实际开发中会遇到各种问题,本文主要通过具体编写代码实现一个横向滑动的功能
本文背景
最近在实现类似驾考宝典顶部题库切换的效果,但是跟驾考宝典不同的是,这里存在很多题库,所以需要用到scroll-view,横向滑动
刚开始实现起来有几个坑,这里捋一下
本文内容
本文主要具体实现一个可横向滑动的功能,具体界面如下图所示
需要注意的两点是:
1)给scroll-view 加以下样式 width: 100%;white-space: nowrap;
2)子元素display:inline-block;
这个地方在外面父元素就不要加flex布局的相关属性了。
具体的样式代码为
代码片段为
https://developers.weixin.qq.com/s/annR87m87ElG
参考文档
Scroll-View 组件的scroll-x属性不起作用? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/0000e080e18d800a66079775d51000
scroll-view横向滚动:客户端和开发工具显示不一样,客户端错位? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/000c44af69c1006e1ce6de9805d800
本文总结
本文主要具体实现一个可横向滑动的功能
附
代码片段一
由于编辑器对wxml代码片段展示有问题,这段代码放在评论区。
代码片段二
const app = getApp()
Page({
data: {
arr: []
},
onReady: function () {
const arr = []
for (let i = 0; i < 20; i++) arr.push(i)
this.setData({
arr
})
}
})
代码片段三
.scroll-box {
width: 100%;
white-space: nowrap;
}
.scroll-box .box{
display:inline-block
}
其他
感谢分享,特别还带代码片段的分享。
下面两点新手比较容易忽略。但是这个也是关键的样式。
1)给scroll-view 加以下样式 width: 100%;white-space: nowrap;
2)子元素display:inline-block;
wxml文件代码如下所示
<scroll-view
scroll-x="{{true}}" style=" width:100%;height: 100px;"
refresher-enabled="{{true}}"
refresher-threshold="{{100}}"
refresher-default-style="white"
refresher-background="lightgreen"
refresher-triggered="{{triggered}}"
bindrefresherpulling="onPulling"
bindrefresherrefresh="onRefresh"
bindrefresherrestore="onRestore"
bindrefresherabort="onAbort"
>
<view class="scroll-box" style="white-space:nowrap;heigth:110rpx; ">
<view class="box" wx:for="{{arr}}" style="border:1px solid #f00;display:inline-block;height: 100rpx;width:100rpx;">
{{item}}
</view>
</view>
</scroll-view>