微信小程序 scroll-view 左右横向滑动没有效果(无法滑动)问题
小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现:
1.scroll-view 中的需要滑动的元素不可以用 float 浮动;
2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的;
3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排;
4.包裹 scroll-view 的大盒子有明确的宽和加上样式--> overflow:hidden;white-space:nowrap;
具体的测试代码如下
<scroll-view scroll-x class='hot-list graybg'>
<view class='hot-good' wx:for="{{hotlist}}">
<image class='backwhite' src='{{item.pic}}'></image>
<view class='overhiddent graybg' style='padding:18rpx 0 6rpx 0;'>{{item.name}}</view>
<view class='red graybg'>{{item.showPrice}}/天</view>
</view>
</scroll-view> .hot-list{
padding: 20rpx 0rpx;
width: auto;
overflow: hidden;
white-space: nowrap;
}
.hot-good{
width: 260rpx;
display: inline-block;
margin: 0 20rpx;
font-size: 24rpx;
}
微信小程序 scroll-view 左右横向滑动没有效果(无法滑动)问题的更多相关文章
- 微信小程序 -- scroll view
效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...
- 微信小程序-自定义菜单导航(实现楼梯效果)
设计初衷 在开发页面时,往往需要实现,点击页面的导航菜单页面滚动到相应位置,滚动页面实现菜单选项的高亮.在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果.在框架中vant U ...
- 微信小程序之实现页面缩放式侧滑效果
效果图: 实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class. 由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点. 1.结构 ...
- 关于微信小程序获取view的动态高度填坑
wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...
- 微信小程序scroll标签的测试
一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...
- 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置
1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...
- 微信小程序将view动态填满全屏
一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750) ][ ...
- 微信小程序(三)页面跳转和图片滑动切换
跳转部分: 在index2.wxml中,添加跳转函数,如下所示:
- 微信小程序滚动到某个位置添加class效果。
<scroll-view scroll-y="true" style="height:100vh;" bindscrolltoupper="up ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
随机推荐
- php 获取视频时长
利用ffmpeg只能获取到本地视频的信息. function video_time($file) { ob_start(); passthru(sprintf(FFMPEG_PATH, $file)) ...
- Office办公软件Excel使用整理
Office办公软件Excel使用整理 Excel默认打印预览于当前连接的打印机的纸张大小保持一致. Excel sheet不见了怎么办 -------------- 设置Excel第二页打印开始的位 ...
- .Net Core 智能提示汉化包
在.Net Core 2.x 版本,Microsoft 官方没有提供 .Net Core 正式版的多语言安装包.因此,我们在用.Net Core 2.x 版本作为框架目标编写代码时,智能提成是英文的. ...
- 【Unity|C#】基础篇(17)——字符串处理(String/StringBuilder)
[学习资料] <C#图解教程>(第25章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu. ...
- 曼孚科技:数据标注,AI背后的百亿市场
1. 两年前,来自山东农村的王磊成为了一位数据标注员.彼时的他,工作内容非常简单且枯燥:识别图片中人的性别. 然而,一段时间之后,他注意到分配给他的任务开始变得越来越复杂:从识别性别到年龄,从框选 ...
- shell变量内字符替换和变量字符修改
vi test.sh a= #将${a}里的第一个123替换为321 b=${a//}; echo "echo variable a" echo $a echo "ech ...
- 数据升级包 - bin文件
运行完升级包后,正常的现象 开头: 结尾:
- 解决pjax加载页面不执行js插件的问题
个人博客 地址:http://www.wenhaofan.com/article/20180913220425 介绍 在使用jquery.pjax的时候发现加载页面时不会执行其中的layui以及jqu ...
- [SUCTF 2019]EasySQL(堆叠注入配合sql_mode)
考点:1.堆叠注入 2.set sql_mode=PIPES_AS_CONCAT;将||视为字符串的连接操作符而非或运算符 意外:注入* 复现: 1;set sql_mode=PIPES_AS_CON ...
- 如来十三掌-关于不断解密的密码学,佛语解密,rot-13(根据13掌),base64
得到MzkuM3gvMUAwnzuvn3cgozMlMTuvqzAenJchMUAeqzWenzEmLJW9 然后尝试嘛 base64不太行 那根据十三掌??rot-13 得到ZmxhZ3tiZHNj ...