微信小程序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 相关文章推荐
ExtJs 3.1 XmlTreeLoader Example Error
Feb 09 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 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实现求相对时间函数
2015/06/15 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
python 实现对文件夹内的文件排序编号
2018/04/12 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
教师求职自荐信
2014/03/09 职场文书
委托书样本
2014/04/02 职场文书
模特大赛策划方案
2014/05/28 职场文书
应届毕业生自荐书
2014/06/18 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
提档介绍信范文
2015/10/22 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
python3操作redis实现List列表实例
2021/08/04 Python
JavaScript设计模式之原型模式详情
2022/06/21 Javascript
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技