微信小程序scrollview 截图(微信小程序scroll-view不能左右滑动问题的解决方法)
类别:编程学习 浏览量:983
时间:2021-10-09 00:24:15 微信小程序scrollview 截图
微信小程序scroll-view不能左右滑动问题的解决方法最近在做自己小程序项目。因为并非专业前端 。所以一步一掉坑。在这里想着把遇到的问题总结一下。避免重复进坑。
问题:
在小程序页面布局的时候用到了scroll-view组件,发现横向移动没有效果。在网上查阅了一下资料发现问题所在。
我的wxml代码
<scroll-view scroll-x="true" class="scroll" bindscrolltolower="lower" bindscroll="scroll"> <view class="user_info"> <view class="user_head"> <image src="../../icon/head.jpg" alt="微信小程序scrollview 截图(微信小程序scroll-view不能左右滑动问题的解决方法)" border="0" />
wxss代码
.enroll_view .scroll_view .scroll{ height:160rpx; width:750rpx; overflow: hidden; } .user_info{ float:left; margin-top:10rpx; height:140rpx; width:140rpx; }
想法很简单,想用float:left;让需要滑动的元素横向排列。经过查阅资料发现需要滑动的元素不能使用float浮动。为实现此效果需要使用display:inline-block;来实现。
继续改(删掉float:left;.用display:inline-block;实现子元素横向排列效果)
wxss样式
.user_info{ margin-top:10rpx; height:140rpx; width:140rpx; display: inline-block; }
改是改完了发现不能用还是不能用。而且发现是因为子集元素超过宽度后就换行了。
所以给scroll-view添加white-space: nowrap;不让其内部元素换行。刷新。实现最终效果。开森。效果图
最终版wxss
.enroll_view .scroll_view .scroll{ height:160rpx; width:750rpx; overflow: hidden; white-space: nowrap; } .user_info{ margin-top:10rpx; height:140rpx; width:140rpx; display: inline-block; }
结
1.scroll-view 中的需要滑动的元素为实现横向排列效果不可使用不 float 浮动,可以用display:inline-block;将其改为行内块元素;
2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的;
3.包裹 scroll-view 的大盒子有明确的宽和加上样式white-space:nowrap;
附scroll-view主要属性:
总结
到此这篇关于微信小程序scroll-view不能左右滑动问题的解决方法的文章就介绍到这了,更多相关微信小程序scroll-view左右滑动内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- 微信小程序function怎么使用(微信小程序在{{ }}中直接使用函数的方法示例)
- 微信小程序静态页面详情(微信小程序基础教程之echart的使用)
- 微信小程序scrollview 截图(微信小程序scroll-view不能左右滑动问题的解决方法)
- 微信小程序映射设置(微信小程序虚拟列表的实现示例)
- 微信小程序开发简单计算器(小程序实现计算器功能)
- 微信小程序接口返回数据怎么弄(微信小程序页面返回传值的4种解决方案汇总)
- 微信小程序swiper大小调整(微信小程序swiper-dot中的点如何改成滑块详解)
- 微信小程序单选框组件(微信小程序picker多列选择器mode = multiSelector)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- 微信小程序通知验证签名方法(微信小程序实现电子签名)
- 微信小程序ui聊天窗口(微信小程序实现简单聊天室)
- 微信小程序计算器怎么用(微信小程序实现计算器功能)
- 宝塔小程序制作(宝塔面板微信小程序使用图文教程)
- 微信小程序贪吃蛇大作战(微信小程序实现贪吃蛇游戏)
- 怎么编写计算小程序(微信小程序实现简易计算器)
- 微信小程序实现自动定位(微信小程序实现锚点定位功能的方法实例)
- 巴厘岛旅游攻略(巴厘岛旅游攻略7天多少钱)
- 文莱旅游攻略(文莱旅游攻略介绍)
- 马来西亚旅游攻略(马来西亚旅游攻略自由行攻略)
- 缅甸旅游攻略(缅甸旅游攻略必去景点推荐)
- 《庆余年2》新消息,原班人马,肖战特别出演,这才是最好的安排(庆余年2新消息原班人马)
- 宁夏灵武恐龙化石发现始末(宁夏灵武恐龙化石发现始末)
热门推荐
- SQL中的CONVERT()函数
- dedecms标签怎么调用(织梦DEDECMS获取当前页面的顶级栏目名称及链接教程)
- html5的优点是什么
- sql怎么把表移到另一个数据库中(sql存储过程实例--动态根据表数据复制一个表的数据到另一个表)
- sql server设置自增(sql server建表时设置ID字段自增的简单方法)
- 怎么选择云服务器(云服务器配置如何选择你知道吗?)
- windows服务器安全设置经验(Windows 2016 服务器安全设置)
- dockercp用法详解(Docker开启TLS和CA认证的方法步骤)
- zabbix数据库解析(zabbix agent2 监控oracle数据库的方法)
- python定时任务详解(使用Python做定时任务及时了解互联网动态)