微信小程序scroll-x失效怎么解決-創(chuàng)新互聯(lián)

今天小編給大家分享一下微信小程序scroll-x失效怎么解決的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司，提供成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，網(wǎng)頁設(shè)計(jì)，建網(wǎng)站，PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);可快速的進(jìn)行網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展；專業(yè)做搜索引擎喜愛的網(wǎng)站，是專業(yè)的做網(wǎng)站團(tuán)隊(duì)，希望更多企業(yè)前來合作!

失效的scroll-x

在微信小程序的文檔中，使用scroll-view標(biāo)簽，然后給它設(shè)置一個scroll-x就可以實(shí)現(xiàn)元素，橫向排列，可以左右滑動。。。。

 然而，在實(shí)際開發(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)實(shí)際出來的效果是這樣的。。扎心了，老鐵！??！

解決方案。。

后來發(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
}

成功滾動

就可以很爽的橫向滑動了。。。。完美解決了

溫馨提示

可以不用給scroll-view設(shè)置display:flex;這種屬性了，但一定要加上這個

.scroll-box {
white-space: nowrap;
}

不然就會變成這樣。

以上就是“微信小程序scroll-x失效怎么解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞名稱：微信小程序scroll-x失效怎么解決-創(chuàng)新互聯(lián)
分享鏈接：http://muchs.cn/article18/ioegp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、App開發(fā)、建站公司、做網(wǎng)站、品牌網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)