微信小程序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 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
Angular 容器部署的方法
Apr 17 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 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/09/03 PHP
php 用sock技术发送邮件的函数
2007/07/21 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
js 走马灯简单实例
2013/11/21 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
vue-router路由模式详解(小结)
2019/08/26 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python学习入门细节知识点
2018/03/29 Python
python查看模块安装位置的方法
2018/10/16 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
新年主持词
2014/03/27 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
博士生专家推荐信
2015/03/25 职场文书
淮海战役观后感
2015/06/11 职场文书
校园安全学习心得体会
2016/01/18 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP