微信小程序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 自动完成脚本整理(33个)
Oct 20 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
详解http访问解析流程原理
Oct 18 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 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使用redis消息队列发布微博的方法示例
2017/06/22 PHP
Prototype String对象 学习
2009/07/19 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
vue路由插件之vue-route
2019/06/13 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
python爬虫常用的模块分析
2014/08/29 Python
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
Python 忽略文件名编码的方法
2020/08/01 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
经济信息系毕业生自荐信范文
2014/03/15 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
给上级领导的感谢信
2015/01/22 职场文书
银行求职信范文
2019/05/13 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书