小程序列表横向滑动

<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,

});

},

})