微信小程序scroll-view横向滑动嵌套for循环的示例代码


Posted in Javascript onSeptember 20, 2018

1、布局及样式等

(1)xml布局

<view class="container">
  <scroll-view scroll-x="true">
    <view class="item-content" wx:for="{{list}}" wx:for-item="item">
      <view class="title">{{item.title}}</view>
      <view class="content">{{item.content}}</view>
    </view>
  </scroll-view>
</view>

(2)wxss

scroll-view {
  width: 80%;
  white-space: nowrap;
}

.item-content {
  width: 40%;
  display: inline-block;
  border: 1rpx solid gray;
  text-align: center;
}

(3)js文件

data: {
   list: [{title:"题目1", content:"内容1"}, 
     {title:"题目2", content:"内容2"}, 
     {title:"题目3", content:"内容3"}, 
     {title:"题目4", content:"内容4"}]
 }

2、设置横向滑动要点

(1)设置横向滑动 scroll-x=”true”。
(2)scroll-view设置宽度及white-space属性。
(3)item设置display: inline-block属性。

3、属性释疑

(1)white-space:属性设置如何处理元素内的空白。

normal 默认。规定段落中的文本不进行换行,空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。

nowrap 文本不会换行,文本会在在同一行上继续,直到遇到br 标签为止。

pre-wrap 保留空白符序列,但是正常地进行换行。

pre-line 合并空白符序列,但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。

(2)display: inline-block;设置为内联块。内联块可以设置长宽,但不从父元素继承长宽。即子元素不换行,成一行排列。

4、其他

微信小程序开发文档 

PS:关于小程序 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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 在firebug调试时用console.log的方法
May 10 Javascript
javascript的内存管理详解
Aug 07 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
js实现移动端图片滑块验证功能
Sep 29 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 #Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 #Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 #Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 #Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 #Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 #Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 #Javascript
You might like
杏林同学录(一)
2006/10/09 PHP
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
js创建数组的简单方法
2016/07/27 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
vue生命周期的探索
2019/04/03 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
Python中函数的用法实例教程
2014/09/08 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
python requests post多层字典的方法
2018/12/27 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
诚信承诺书范文
2014/03/27 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP