美文网首页
微信小程序scroll-x失效的解决方法

微信小程序scroll-x失效的解决方法

作者: jed_shi | 来源:发表于2019-01-05 13:22 被阅读0次

    失效的scroll-x

    在微信小程序的文档中,使用scroll-view标签,然后给它设置一个scroll-x就可以实现元素,横向排列,可以左右滑动。。。。
    然而,在实际开发中,发现并不是这么简单。。。贴上部分wxmlwxss代码...

      <!-- 横向滚动商品 -->
        <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;
    }
    

    解决方案。。

    后来发现其实只要给scroll-view加上white-space: nowrap; ,给scroll-view的子元素box加上display:inline-block就行了。。。
    就像这样:

    .scroll-box {
    white-space: nowrap;
    }
    .scroll-box .box{
    display:inline-block
    }
    

    就可以很爽的横向滑动了。。。。完美解决了

    温馨提示

    可以不用给scroll-view设置display:flex;这种属性了,但一定要加上这个

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

    相关文章

      网友评论

          本文标题:微信小程序scroll-x失效的解决方法

          本文链接:https://www.haomeiwen.com/subject/brmrrqtx.html