最新在做小程序的项目，然后需要使用到水平滚动条，然后看了官方的文档，实在是简单到不行，使用就可以捣鼓着写一个水平滚动的组件，现在有时候，记录一下，方便日后查阅。
水平滚动的原理
- 怎样可以水平滚动呢？小程序有没有提供有什么可以水平滚动的组件呢？
- 怎样把元素水平排列呢？
怎么实现水平滚动
解决的方法如下：
- 小程序提供了一个
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 () {
}
})
最终的实现的效果
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦