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

更新时间：2018年07月18日 11:16:19 作者：jed_shi

在微信小程序的文档中，使用scroll-view标签，然后给它设置一个scroll-x就可以实现元素，横向排列，可以左右滑动，但是在实际开发中会遇到各种问题，下面小编给大家带来了微信小程序scroll-x失效的完美解决方法,需要的朋友可以参考下

失效的scroll-x

在微信小程序的文档中，使用scroll-view标签，然后给它设置一个scroll-x就可以实现元素，横向排列，可以左右滑动。。。。

然而，在实际开发中，发现并不是这么简单。。。贴上部分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;
}

不能横向滚动

发现实际出来的效果是这样的。。扎心了，老铁！！！

解决方案。。

后来发现其实只要给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失效的完美解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

JS判断浏览器类型与版本的实现代码
在JS中判断浏览器的类型，估计是每个编辑过页面的开发人员都遇到过的问题
2012-10-10
javasciprt下jquery函数$.post执行无响应的解决方法
这篇文章主要介绍了javasciprt下jquery函数$.post执行无响应的解决方法,需要的朋友可以参考下
2014-03-03
Javascript中的高阶函数介绍
这篇文章主要介绍了Javascript中的高阶函数介绍,本文讲解了什么是高阶函数、Javascript的高阶函数、还原高阶函数、高阶函数使用实例等内容,需要的朋友可以参考下
2015-03-03
TypeScript使用axios库进行高效的网页数据抓取
在当今的互联网时代,数据已成为企业最宝贵的资产之一,无论是社交媒体分析、市场趋势预测还是用户行为研究,高效地获取和处理网页数据都是至关重要的,本文将通过访问抖音平台的案例,介绍如何在TypeScript中使用axios库进行高效的网页数据抓取
2024-08-08
JavaScript使用readAsDataUrl方法预览图片
这篇文章主要为大家详细介绍了JavaScript使用readAsDataUrl方法预览图片，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
JavaScript中16进制颜色与rgb颜色互相转换的示例代码
这篇文章主要介绍了JavaScript中16进制颜色与rgb颜色互相转换的示例代码,通过示例代码介绍了JS 颜色16进制、rgba相互转换问题,感兴趣的朋友一起看看吧
2024-01-01
React diff算法面试考点超详细讲解
渲染真实DOM的开销很大，有时候我们修改了某个数据，直接渲染到真实dom上会引起整个dom树的重绘和重排。我们希望只更新我们修改的那一小块dom，而不是整个dom，diff算法就帮我们实现了这点。diff算法的本质就是：找出两个对象之间的差异，目的是尽可能做到节点复用
2022-12-12
一文带你详细理解uni-app如何构建小程序
uni-app是近年来一种新兴的多端混合开发框架,适合开发跨平台应用,方便多端运行,下面这篇文章主要给大家介绍了关于uni-app如何构建小程序的相关资料,需要的朋友可以参考下
2022-11-11
js Math数学简单使用操作示例
这篇文章主要介绍了js Math数学简单使用,结合实例形式分析了js Math数学相关函数的基本用法与操作注意事项,需要的朋友可以参考下
2020-03-03
javascript中Date()函数在各浏览器中的显示效果
本文给大家分享的是javascript中Date()函数在各浏览器中的显示效果，由于各大浏览器的兼容性问题，本文做了这个测试，希望有需要的小伙伴可以少走些弯路
2015-06-06

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具