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


Posted in Javascript onJuly 18, 2018

失效的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-x失效的完美解决方法 

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

解决方案。。

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

 就像这样:

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

成功滚动

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

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

温馨提示

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

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

不然就会变成这样。

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

总结

以上所述是小编给大家介绍的微信小程序scroll-x失效的完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
js实现继承的5种方式
Dec 01 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
Angular 路由route实例代码
Jul 12 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
JavaScript门面模式详解
Oct 19 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 Javascript
Echarts如何重新渲染实例详解
May 30 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 #Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 #Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 #Javascript
webpack4.x打包过程详解
Jul 18 #Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 #Javascript
Vue隐藏显示、只读实例代码
Jul 18 #Javascript
详解vue中axios的封装
Jul 18 #Javascript
You might like
如何利用PHP执行.SQL文件
2013/07/05 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
JNI的定义
2012/11/25 面试题
党员年终民主评议的自我评价
2013/11/05 职场文书
法律进企业活动方案
2014/03/04 职场文书
一年级学生期末评语
2014/04/21 职场文书
广播节目策划方案
2014/05/23 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
活动总结格式
2014/08/30 职场文书
先进教师事迹材料
2014/12/16 职场文书
安全教育的主题班会
2015/08/13 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书