微信小程序 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 ...
随机推荐
- CentOS虚拟机挂载U盘
参考:https://www.cnblogs.com/jizhong/p/9410659.html 1.检查VMUSBArbService服务是否正在运行 2.在VMWare中连接插入的U盘 3.使用 ...
- 【卸载Pycharm】
一.卸载软件及安装目录 1. 控制面板中卸载 二.删除注册表信息 1. 备份注册表信息 2. 删除注册表信息
- linux c++调试日志函数
#ifndef MYLOG_H #define MYLOG_H #include <stdio.h> #define __DEBUG__ #ifdef __DEBUG__ #define ...
- 【LInux01】学习Linux课程体系
知识 =>技能 需要大量的练习 相当于复盘 要有成就感 在一个领域深挖,再迁移到其他领域 1.两周以后的知识留存率: 主动学习: 动手实践:40% 讲给别人听:70% 写博客:是写教程,便 ...
- DFS/BFS-A - Red and Black
A - Red and Black There is a rectangular room, covered with square tiles. Each tile is colored eithe ...
- WPF 不支持从调度程序线程以外的线程对其 SourceCollection 进行的更改
该问题出现在WPF中的VM类中,ObservableCollection类型,该类型的 CollectionView 不支持从调度程序线程以外的线程对其 SourceCollection 进行的更改, ...
- 二叉堆(2)LeftistHeap
左倾堆,用于堆的快速合并. 规则: ① 节点的键值小于或等于它的左右子节点的键值. ② 节点的左孩子的NPL >= 右孩子的NPL. ③ 节点的NPL = 它的右孩子的NPL + 1. 测试文件 ...
- Win10安装5 —— 系统安装步骤
本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12369698.html 1.打开U盘中的解压好的文件夹后,双击打开"s ...
- go-web 获取get/post请求中的请求头和表单数据
package main import ( "fmt" "net/http" ) func handler(w http.ResponseWriter, r * ...
- 题解【AcWing487】金明的预算方案
题面 有依赖的背包问题模板题. 我们观察到 每个主件可以有 0 个.1 个或 2 个附件 , 于是考虑对于每一个主件,我们用枚举子集的方式枚举使用哪一些附件, 然后就是一个经典的分组背包问题了. 注意 ...