微信小程序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的几种方法
Oct 23 Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 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版(2)
2006/10/09 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
详谈PHP中的密码安全性Password Hashing
2017/02/04 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
详解javascript函数的参数
2015/11/10 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
socket + select 完成伪并发操作的实例
2017/08/15 Python
如何利用python查找电脑文件
2018/04/27 Python
python得到电脑的开机时间方法
2018/10/15 Python
python实现图片转字符小工具
2019/04/30 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
交通事故检查书范文
2014/01/30 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
限期整改通知书
2015/04/22 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
获奖感言一句话
2015/07/31 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书