微信小程序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 相关文章推荐
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
ExpressJS入门实例
Jan 14 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
详解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生成指定长度随机数最简洁的方法
2014/07/14 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
python+Django+apache的配置方法详解
2016/06/01 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
appium+python adb常用命令分享
2020/03/06 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
副总经理岗位职责
2014/03/16 职场文书
一岗双责责任书
2014/04/15 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
分析Python list操作为什么会错误
2021/11/17 Python
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript
Java Spring读取和存储详细操作
2022/08/05 Java/Android