小程序组件 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;

具体的测试代码如下:

<view class="scroll_box"> 
    <scroll-view class="scroll-view_x" scroll-x style="width: auto;overflow:hidden;">

      <view class="item_list" wx:for="{{list}}">
<image src="../../images/head.jpg" class="item_book_img" mode="aspectFill"></image>
<view class="item_book_text">测试数据</view>
</view> </scroll-view>
</view>
.scroll_box{
width: 100%;
height: 307rpx;
overflow: hidden;
padding: 20rpx;
background: #fff;
white-space: nowrap;
}
.item_list{
width: 160rpx;
height: auto;
margin-right: 23rpx;
display: inline-block;
}

得到的具体效果如下:

小程序组件 scroll-view 滑动的更多相关文章

  1. 小程序组件 scroll-view 横向滚动条无效

    小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过,并且换行了),经调试发现: 1.sc ...

  2. 微信小程序 scroll-view 左右横向滑动没有效果(无法滑动)问题

    小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现: 1.scroll ...

  3. 小程序组件化框架 WePY 在性能调优上做出的探究

    作者:龚澄 导语 性能调优是一个亘古不变的话题,无论是在传统H5上还是小程序中.因为实现机制不同,可能导致传统H5中的某些优化方式在小程序上并不适用.因此必须另开辟蹊径找出适合小程序的调估方式. 本文 ...

  4. 微信小程序-组件篇

    一.摘要 组件是小程序整个语法中占比比较大的一部分,没写过组件可以说只懂了半个小程序.组件提供了类似页面的生命周期与逻辑.相比于模板,组件能实现的功能更加全面,也更为强大.通过slot可以自由扩展组件 ...

  5. 小程序组件--> 组件传参

    小程序组件,在components文件夹右击-->创建文件夹-->右击-->新建component即可 创建一个组件 如果多个地方需要使用到,可以在app.json中加入一下代码,相 ...

  6. 微信小程序组件学习 -- 注册页面

    微信小程序组件使用手册地址: 1. 百度搜索"微信公众平台",扫码登录之后,点击帮助文档里面的普通小程序. 2. 接着选择"开发"-->"组件& ...

  7. 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)

    1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...

  8. 小程序 onReachBottom 事件快速滑动时不触发的bug

    一般在列表页面 会先加载一定数量的数据 触发上拉加载这个动作的时候再陆续加载数据 假如上拉一次加载10条数据 在小程序中 你快速滑动页面触发加载这个事件的话 你会发现小程序卡着不动了 刚开始以为数据加 ...

  9. WePY | 小程序组件化开发框架

    资源连接: WePY | 小程序组件化开发框架 WePYAWESOME 微信小程序wepy开发资源汇总 文档 GITHUB weui WebStorm/PhpStorm 配置识别 *.wpy 文件代码 ...

随机推荐

  1. Ch05 类 - 练习

    1. 改进5.1节的Counter类,让它不要在Int.MaxValue是变成负数. class Counter{     private var value = Int.MaxValue     d ...

  2. Windows 下运行Makefile文件

    下载并安装Microsoft Visual Studio2017 配置环境变量: 计算机右击-属性-高级系统设置-环境变量-选择Path编辑-添加nmake的路径: D:\Microsoft Visu ...

  3. [LeetCode] 系统刷题3_Binary search

    可以参考 [LeetCode] questions conclusion_ Binary Search

  4. fiddler学习总结--通过Fiddler模拟弱网进行测试

    弱网测试的目的: 弱网测试可以发现一些因为网络问题导致的交互问题,从而更好的完善应用的性能. 关注点:1.卡死,崩溃,无响应,闪退.2.业务交互数据传输正确性. 通过Fiddler可以模拟弱网进行测试 ...

  5. CentOS 7 NAT模式LVS搭建

    NAT模式下 , 调度器需要有两个IP , 一个公网IP一个内网IP , web服务器只需要内网IP 调度器LB : 192.168.94.11(内网IP)  192.168.29.11 (仅主机模式 ...

  6. WebForm复合控件RadioButtonList、CheckBoxList、DropDownList

    1.RadioButtonList     单选集合 -属性:RepeatDirection:Vertical (垂直排布)/Horizontal (横向排布) RepeatLayout:Table ...

  7. sublime text 入门

    sublime text3入门教程 2017年07月19日 09:15:51 阅读数:13736 作者:sam976 转载需征得作者本人同意,谢谢. 1.介绍 所谓工欲善其事必先利其器,编码过程合理熟 ...

  8. 网页布局要注意的事项,以及CSS3需要特别注意的地方。

    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;隐藏超出部分,出省略号 一定要先布局!布局!布局!要先设置好色块,将位置确 ...

  9. PHP防止网页快速刷新+代理ip访问

    前几天网站收到了一些CC攻击,比较郁闷...这里分享一下,防止网页自动刷新的方法以及阻止代理IP访问网站的方法,代码是分开的,两个功能,需要那个用那个,可以自定义时间间隔,这个代码不止可以防CC攻击, ...

  10. 谷歌技术"三宝"之BigTable

    转自:https://blog.csdn.net/OpenNaive/article/details/7532589 2006年的OSDI有两篇google的论文,分别是BigTable和Chubby ...