微信小程序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动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
详解.vue文件解析的实现
Jun 11 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
layui树形菜单动态遍历的例子
Sep 23 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
使用typescript快速开发一个cli的实现示例
Dec 09 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
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
PHP常用处理静态操作类
2015/04/03 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
Python实现最大子序和的方法示例
2019/07/05 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
python如何编写win程序
2020/06/08 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
办护照工作证明范本
2014/01/14 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
晚归检讨书
2014/02/19 职场文书
普通党员整改措施
2014/10/24 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
中秋节晚会开场白
2015/05/29 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang