微信小程序scroll-x失效的完美解決方法
更新時(shí)間：2018年07月18日 11:16:19 作者：jed_shi
在微信小程序的文檔中，使用scroll-view標(biāo)簽，然后給它設(shè)置一個(gè)scroll-x就可以實(shí)現(xiàn)元素，橫向排列，可以左右滑動(dòng)，但是在實(shí)際開(kāi)發(fā)中會(huì)遇到各種問(wèn)題，下面小編給大家?guī)?lái)了微信小程序scroll-x失效的完美解決方法,需要的朋友可以參考下
失效的scroll-x
在微信小程序的文檔中，使用scroll-view標(biāo)簽，然后給它設(shè)置一個(gè)scroll-x就可以實(shí)現(xiàn)元素，橫向排列，可以左右滑動(dòng)。。。。
然而，在實(shí)際開(kāi)發(fā)中，發(fā)現(xiàn)并不是這么簡(jiǎn)單。。。貼上部分wxml和wxss代碼…
<!-- 橫向滾動(dòng)商品 -->
<scroll-view class='scroll-box' scroll-x >
<view class='box'>
<view class='box-hd'>
<image src='https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3ab7c3c9c4fcc3ceabc0cf33a244d6b7/cefc1e178a82b90137378cd87f8da9773812ef47.jpg'></image>
<view class='info'>
<view class='name'>jed_shi</view>
<view class='time'>剩余09:43:21</view>
</view>
</view>
<view class='box-img'>
<image src='https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=d369d78d98eef01f52141ec5d0fc99e0/c2fdfc039245d688b3d9dc4da8c27d1ed31b247b.jpg'></image>
</view>
<view class='box-extra'>
<text class='price'>￥321</text>
<button>加入</button>
</view>
</view>
<view class='box'>
<view class='box-hd'>
<image src='https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3ab7c3c9c4fcc3ceabc0cf33a244d6b7/cefc1e178a82b90137378cd87f8da9773812ef47.jpg'></image>
<view class='info'>
<view class='name'>jed_shi</view>
<view class='time'>剩余09:43:21</view>
</view>
</view>
<view class='box-img'>
<image src='https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=d369d78d98eef01f52141ec5d0fc99e0/c2fdfc039245d688b3d9dc4da8c27d1ed31b247b.jpg'></image>
</view>
<view class='box-extra'>
<text class='price'>￥321</text>
<button>加入</button>
</view>
</view>
<view class='box'>
<view class='box-hd'>
<image src='https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3ab7c3c9c4fcc3ceabc0cf33a244d6b7/cefc1e178a82b90137378cd87f8da9773812ef47.jpg'></image>
<view class='info'>
<view class='name'>jed_shi</view>
<view class='time'>剩余09:43:21</view>
</view>
</view>
<view class='box-img'>
<image src='https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=d369d78d98eef01f52141ec5d0fc99e0/c2fdfc039245d688b3d9dc4da8c27d1ed31b247b.jpg'></image>
</view>
<view class='box-extra'>
<text class='price'>￥321</text>
<button>加入</button>
</view>
</view>
<view class='box'>
<view class='box-hd'>
<image src='https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3ab7c3c9c4fcc3ceabc0cf33a244d6b7/cefc1e178a82b90137378cd87f8da9773812ef47.jpg'></image>
<view class='info'>
<view class='name'>jed_shi</view>
<view class='time'>剩余09:43:21</view>
</view>
</view>
<view class='box-img'>
<image src='https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=d369d78d98eef01f52141ec5d0fc99e0/c2fdfc039245d688b3d9dc4da8c27d1ed31b247b.jpg'></image>
</view>
<view class='box-extra'>
<text class='price'>￥321</text>
<button>加入</button>
</view>
</view>
</scroll-view>
.scroll-box {
margin-top: 33rpx;
padding-bottom: 40rpx;
}
.scroll-box .box:first-child {
margin-left: 32rpx;
}
.scroll-box .box {
width: 296rpx;
margin-right: 32rpx;
}
.scroll-box .box .box-hd {
display: flex;
align-items: center;
}
.scroll-box .box .box-hd image {
width: 64rpx;
height: 64rpx;
border-radius: 50%;
margin-right: 15rpx;
}
.scroll-box .box .box-hd .info {
display: flex;
flex-direction: column;
}
.scroll-box .box .box-hd .info .name {
font-size: 28rpx;
color: #333;
line-height: 1;
padding-bottom: 10rpx;
}
.scroll-box .box .box-hd .info .time {
font-size: 22rpx;
color: #999;
line-height: 1;
}
.scroll-box .box .box-img {
margin-top: 16rpx;
}
.scroll-box .box .box-img image {
width: 296rpx;
height: 222rpx;
border-radius: 15rpx;
}
.scroll-box .box .box-extra {
display: flex;
justify-content: space-between;
}
.scroll-box .box .box-extra .price {
font-size: 32rpx;
color: #f15733;
}
.scroll-box .box .box-extra button {
width: 104rpx;
height: 44rpx;
background-color: #f15733;
color: #fff;
margin: 0;
padding: 0;
font-size: 26rpx;
line-height: 44rpx;
margin-right: 8rpx;
}
不能橫向滾動(dòng)
發(fā)現(xiàn)實(shí)際出來(lái)的效果是這樣的。。扎心了，老鐵?。?！
解決方案。。
后來(lái)發(fā)現(xiàn)其實(shí)只要給scroll-view加上white-space: nowrap; ，給scroll-view的子元素box加上display:inline-block就行了。。。
就像這樣：
.scroll-box {
white-space: nowrap;
}
.scroll-box .box{
display:inline-block
}
成功滾動(dòng)
就可以很爽的橫向滑動(dòng)了。。。。完美解決了
溫馨提示
可以不用給scroll-view設(shè)置display:flex;這種屬性了，但一定要加上這個(gè)
.scroll-box {
white-space: nowrap;
}
不然就會(huì)變成這樣。
總結(jié)
以上所述是小編給大家介紹的微信小程序scroll-x失效的完美解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)彈幕特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
java和JavaScript是兩個(gè)不同的語(yǔ)言。那么這兩個(gè)語(yǔ)言有什么不同呢？下面小編通過(guò)本文給大家介紹下2016-09-09
詳解設(shè)置Webstorm 利用babel將ES6自動(dòng)轉(zhuǎn)碼成ES5
這篇文章主要介紹了詳解設(shè)置Webstorm 利用babel將ES6自動(dòng)轉(zhuǎn)碼成ES5，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Javascript控制頁(yè)面鏈接在新窗口打開(kāi)具體方法
今天看一個(gè)朋友說(shuō)不在A標(biāo)題中加打開(kāi)窗口形式要怎么讓頁(yè)面中所有頁(yè)面在新頁(yè)面打開(kāi)，后來(lái)我找了幾種比較實(shí)用辦法，個(gè)人最喜歡的是最后一種方法哦2013-08-08
詳解javaScript中Number數(shù)字類(lèi)型的使用
Number和Math都屬于JavaScript中的內(nèi)置對(duì)象，Number數(shù)字類(lèi)型作為基礎(chǔ)數(shù)據(jù)類(lèi)型，我們?cè)陂_(kāi)發(fā)過(guò)程中會(huì)經(jīng)常用到，包括數(shù)字精度的格式化，還有字符串轉(zhuǎn)換成數(shù)字等操作。本文將詳細(xì)講解其用法，感興趣的可以了解一下2022-04-04
微信小程序?qū)崿F(xiàn)tab頁(yè)面切換效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)tab頁(yè)面切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
大家在制作網(wǎng)頁(yè)或者小程序的時(shí)候經(jīng)常用到隨機(jī)數(shù)，作者整理了一個(gè)很簡(jiǎn)單的JS生成隨機(jī)數(shù)的程序，一起學(xué)習(xí)下。2018-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas繪制折線(xiàn)圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)旋轉(zhuǎn)木馬輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
require.js是一個(gè)js腳本加載器，它遵循AMD(Asynchronous Module Definition)規(guī)范，實(shí)現(xiàn)js腳本的異步加載，不阻塞頁(yè)面的渲染和其后的腳本的執(zhí)行，并提供了在加載完成之后的執(zhí)行相應(yīng)回調(diào)函數(shù)的功能2017-07-07