微信小程序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 相关文章推荐
HTML DOM的nodeType值介绍
Mar 31 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
简单学习vue指令directive
Nov 03 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
layui table数据修改的回显方法
Sep 04 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
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
面包屑导航详解
2017/12/07 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
Vue项目实现换肤功能的一种方案分析
2019/08/28 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
人事部主管岗位职责
2013/12/26 职场文书
抄作业检讨书
2014/02/17 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
企业员工辞职信范文
2015/05/12 职场文书
汉语拼音教学反思
2016/02/22 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript