微信小程序官方的Demo对于我难点就在于把scroll-x 的子部件给弄到一排，还的，能用按钮控制出他的移动,官方Demo恰好没给出wxss代码，下面我给出实现代码注意 white-space:nowrap千万不能少,其他的写法虽然能把他们弄到水平一排，但是他们大部分都是不能水平滚动，或者通过按钮控制元素滚动
效果图:
<!--pages/begin/begin.wxml-->
<scroll-view class="scroll-view-V" scroll-y style="height: 200px" scroll-into-view="{{CurrVtoView}}">
<view id="green" class="scroll-view-V-item bc_green"></view>
<view id="red" class="scroll-view-V-item bc_red"></view>
<view id="blue" class="scroll-view-V-item bc_blue"></view>
<view id="yellow" class="scroll-view-V-item bc_yellow"></view>
</scroll-view>
<view>
<button bindtap="downtap">下翻</button>
</view>
<scroll-view class="scroll-view-H" scroll-x style=" display:flex; width:100%;white-space:nowrap" scroll-into-view="{{CurrHtoView}}">
<view id="green" class="scroll-view-H-item bc_green"></view>
<view id="red" class="scroll-view-H-item bc_red"></view>
<view id="blue" class="scroll-view-H-item bc_blue"></view>
<view id="yellow" class="scroll-view-H-item bc_yellow"></view>
</scroll-view>
<view>
<button bindtap="righttap">右翻</button>
</view>/* pages/begin/begin.wxss */
.bc_green {
background-color: green;
height: 100px;
}
.bc_red {
background-color: red;
height: 100px;
}
.bc_yellow {
background-color: yellow;
height: 100px;
}
.bc_blue {
background-color: blue;
height: 100px;
}
.scroll-view-H {
margin-top:30px;
}
.scroll-view-H-item {
width:200px;
display:inline-block;
}// pages/begin/begin.js
var order = ['green','red','blue','yellow','green']
Page({
/**
* 页面的初始数据
*/
data: {
CurrVtoView:'green',
CurrHtoView:'green',
scrollTop:100
},
downtap: function (e) {
for (var i = 0; i < order.length; ++i) {
if (this.data.CurrVtoView === order[i]) {
break;
}
}
this.setData(
{
CurrVtoView: order[i + 1]
}
)
console.log(this.data.CurrVtoView)
},
righttap: function (e) {
for (var i = 0; i < order.length; ++i) {
if (this.data.CurrHtoView === order[i]) {
break;
}
}
this.setData(
{
CurrHtoView: order[i + 1]
}
)
console.log(this.data.CurrHtoView)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})