小程式列表橫向滑動
阿新 • • 發佈：2018-12-09
<1>xml檔案
<view>
<scroll-view scroll-x class="scroll-header">
<view class="wrap1" wx:for="{{lists}}">
<text class="textLine2">{{item.name}}</text>
</view>
</scroll-view>
</view>
<2>wxss檔案
.scroll-header {
display: flex;
white-space: nowrap;
}
.scroll-header view {
height: 50rpx;
width: 200rpx;
display: inline-block;
}
有兩點需要注意：下面兩個必須要加上。
（1）white-space: nowrap; 表示規定段落中的文字不進行換行：
（2）display: inline-block; 主要的用處是用來處理行內非替換元素的高寬問題的
3.js檔案
var lists = []
Page({
/**
* 頁面的初始資料
*/
data: {
list: []
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function(options) {
for (var i = 0; i < 15; i++) {
lists.push({
name: "第" + i + "天"
})
}
this.setData({ //獲取資料成功後的資料繫結
lists: lists,
});
},
})