最新在做小程序的项目，然后需要使用到水平滚动条，然后看了官方的文档，实在是简单到不行，使用就可以捣鼓着写一个水平滚动的组件，现在有时候，记录一下，方便日后查阅。
水平滚动的原理
- 怎样可以水平滚动呢？小程序有没有提供有什么可以水平滚动的组件呢？
- 怎样把元素水平排列呢？
怎么实现水平滚动
解决的方法如下：
- 小程序提供了一个
scroll-view的组件，可滚动试图的区域，设置scroll-x可以设置横向滚动，并且设置不换行，使用的是white-space: nowrap; - 可以设置
display: inline-block，把元素设置成水平排列。
具体代码怎么实现水平滚动
现在这两个问题的思路已清晰，接下来就是具体代码实现。
<!-- HTML的代码 -->
<scroll-view class='wrapper' scroll-x="true">
<view class='horizontal-scroll' wx:for="{{dataList}}" wx:key="{{index}}">
<text>{{item.name}}</text>
</view>
</scroll-view>
css样式：
.wrapper {
width: 100%;
white-space: nowrap;
display: flex;
}
.horizontal-scroll {
width: 100rpx;
height: 100rpx;
line-height: 100rpx;
background-color: green;
margin-right: 40rpx;
display: inline-block;
text-align: center;
}
.horizontal-scroll text {
font-size: 28rpx;
color: #fff;
text-align: center;
}
JS 部分：
Page({
/**
* 页面的初始数据
*/
data: {
dataList:[
{
name: '贾宝玉'
},
{
name: '林黛玉'
},
{
name: '薛宝钗'
},
{
name: '贾元春'
},
{
name: '贾迎春'
},
{
name: '贾探春'
},
{
name: '贾惜春'
}
],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.data.dataList;
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
最终的实现的效果
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦