微信小程序scroll-x失效的完美解决方法
时间:2018-07-18
在微信小程序的文档中,使用scroll-view标签,然后给它设置一个scroll-x就可以实现元素,横向排列,可以左右滑动,但是在实际开发中会遇到各种问题,下面小编给大家带来了微信小程序scroll-x失效的完美解决方法,需要的朋友可以参考下
失效的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-view加上white-space: nowrap; ,给scroll-view的子元素box加上display:inline-block就行了。。。
就像这样:
.scroll-box { white-space: nowrap; } .scroll-box .box{ display:inline-block }
成功滚动
就可以很爽的横向滑动了。。。。完美解决了
温馨提示
可以不用给scroll-view设置display:flex;这种属性了,但一定要加上这个
.scroll-box { white-space: nowrap; }
不然就会变成这样。
总结
以上所述是小编给大家介绍的微信小程序scroll-x失效的完美解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 浅析Flutter AbsorbPointer 与 IgnorePointer的区别
- php用wangeditor3实现图片上传功能
- Flutter集成到已有iOS工程的方法步骤
- php的命名空间与自动加载实现方法
- Android Studio实现简易计算器(表格布局TableLayout)
- php常用经典函数集锦【数组、字符串、栈、队列、排序等】
- php实现的表单验证类完整示例
- Android studio实现简单的计算器
- Thinkphp5框架实现获取数据库数据到视图的方法
- thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
- Android Studio实现简单计算器功能
- 深入学习微信网址链接解封的防封原理visit_type
- kotlin实现五子棋单机游戏
- thinkphp3.2框架中where条件查询用法总结
- Android10自动连接WiFi问题的解决