微信小程序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广告实现代码
Nov 17 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
js选项卡的制作方法
Jan 23 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
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 获取全局变量的代码
2011/04/21 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python求pi的方法
2014/10/08 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python计算导数并绘图的实例
2020/02/29 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
主管职责范文
2013/11/09 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
目标责任书范本
2014/04/16 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
养牛场项目建议书
2014/05/13 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
面试感谢信范文
2015/01/22 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
离婚起诉状范本
2015/05/19 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
导游词之太原天龙山
2020/01/02 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫