微信小程序scroll-x失效的完美解決方法
更新時間：2018年07月18日 11:16:19 作者：jed_shi
在微信小程序的文檔中，使用scroll-view標(biāo)簽，然后給它設(shè)置一個scroll-x就可以實現(xiàn)元素，橫向排列，可以左右滑動，但是在實際開發(fā)中會遇到各種問題，下面小編給大家?guī)砹宋⑿判〕绦騭croll-x失效的完美解決方法,需要的朋友可以參考下
失效的scroll-x
在微信小程序的文檔中，使用scroll-view標(biāo)簽，然后給它設(shè)置一個scroll-x就可以實現(xiàn)元素，橫向排列，可以左右滑動。。。。
然而，在實際開發(fā)中，發(fā)現(xiàn)并不是這么簡單。。。貼上部分wxml和wxss代碼…
<!-- 橫向滾動商品 -->
<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;
}
不能橫向滾動
發(fā)現(xiàn)實際出來的效果是這樣的。。扎心了，老鐵?。?！
解決方案。。
后來發(fā)現(xiàn)其實只要給scroll-view加上white-space: nowrap; ，給scroll-view的子元素box加上display:inline-block就行了。。。
就像這樣：
.scroll-box {
white-space: nowrap;
}
.scroll-box .box{
display:inline-block
}
成功滾動
就可以很爽的橫向滑動了。。。。完美解決了
溫馨提示
可以不用給scroll-view設(shè)置display:flex;這種屬性了，但一定要加上這個
.scroll-box {
white-space: nowrap;
}
不然就會變成這樣。
總結(jié)
以上所述是小編給大家介紹的微信小程序scroll-x失效的完美解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
在JS中判斷瀏覽器的類型，估計是每個編輯過頁面的開發(fā)人員都遇到過的問題2012-10-10
javasciprt下jquery函數(shù)$.post執(zhí)行無響應(yīng)的解決方法
這篇文章主要介紹了javasciprt下jquery函數(shù)$.post執(zhí)行無響應(yīng)的解決方法,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了Javascript中的高階函數(shù)介紹,本文講解了什么是高階函數(shù)、Javascript的高階函數(shù)、還原高階函數(shù)、高階函數(shù)使用實例等內(nèi)容,需要的朋友可以參考下2015-03-03
TypeScript使用axios庫進(jìn)行高效的網(wǎng)頁數(shù)據(jù)抓取
在當(dāng)今的互聯(lián)網(wǎng)時代,數(shù)據(jù)已成為企業(yè)最寶貴的資產(chǎn)之一,無論是社交媒體分析、市場趨勢預(yù)測還是用戶行為研究,高效地獲取和處理網(wǎng)頁數(shù)據(jù)都是至關(guān)重要的,本文將通過訪問抖音平臺的案例,介紹如何在TypeScript中使用axios庫進(jìn)行高效的網(wǎng)頁數(shù)據(jù)抓取2024-08-08
JavaScript使用readAsDataUrl方法預(yù)覽圖片
這篇文章主要為大家詳細(xì)介紹了JavaScript使用readAsDataUrl方法預(yù)覽圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼
這篇文章主要介紹了JavaScript中16進(jìn)制顏色與rgb顏色互相轉(zhuǎn)換的示例代碼,通過示例代碼介紹了JS 顏色16進(jìn)制、rgba相互轉(zhuǎn)換問題,感興趣的朋友一起看看吧2024-01-01
渲染真實DOM的開銷很大，有時候我們修改了某個數(shù)據(jù)，直接渲染到真實dom上會引起整個dom樹的重繪和重排。我們希望只更新我們修改的那一小塊dom，而不是整個dom，diff算法就幫我們實現(xiàn)了這點。diff算法的本質(zhì)就是：找出兩個對象之間的差異，目的是盡可能做到節(jié)點復(fù)用2022-12-12
一文帶你詳細(xì)理解uni-app如何構(gòu)建小程序
uni-app是近年來一種新興的多端混合開發(fā)框架,適合開發(fā)跨平臺應(yīng)用,方便多端運行,下面這篇文章主要給大家介紹了關(guān)于uni-app如何構(gòu)建小程序的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了js Math數(shù)學(xué)簡單使用,結(jié)合實例形式分析了js Math數(shù)學(xué)相關(guān)函數(shù)的基本用法與操作注意事項,需要的朋友可以參考下2020-03-03
javascript中Date()函數(shù)在各瀏覽器中的顯示效果
本文給大家分享的是javascript中Date()函數(shù)在各瀏覽器中的顯示效果，由于各大瀏覽器的兼容性問題，本文做了這個測試，希望有需要的小伙伴可以少走些彎路2015-06-06