脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序scroll-view横向滑动嵌套for循环

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

 更新时间：2018年09月20日 13:44:48   作者：黑金白土  
这篇文章主要介绍了微信小程序scroll-view横向滑动嵌套for循环的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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实现报警器提示音效果

    这篇文章给大家分享分享一段代码基于JavaScript实现报警器提示音效果，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-10-10
  • js跳转到指定url的方法与实际使用

    js跳转到指定url的方法与实际使用

    这篇文章主要给大家介绍了关于js跳转到指定url的方法与实际使用的相关资料,要实现JavaScript跳转到指定URL,可以使用window.location对象来实现,需要的朋友可以参考下
    2023-09-09
  • JS中bridge的原理与封装

    JS中bridge的原理与封装

    这篇文章主要介绍了JS中bridge的原理与封装，文章围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-06-06
  • JavaScript捕捉事件和阻止冒泡事件实例分析

    JavaScript捕捉事件和阻止冒泡事件实例分析

    这篇文章主要介绍了JavaScript捕捉事件和阻止冒泡事件,结合实例形式分析了冒泡的原理及javascript阻止冒泡的相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • 如何将一个String和多个String值进行比较思路分析

    如何将一个String和多个String值进行比较思路分析

    开发中我们经常需要将一个String和多个String值进行比较。直觉反应是使用||符号连接多个===完成，感兴趣的朋友可以了解下哈
    2013-04-04
  • JS正则表达式验证端口范围(0-65535)

    JS正则表达式验证端口范围(0-65535)

    这篇文章主要介绍了JS正则表达式验证端口范围(0-65535),文中给大家提到了Js正则表达式验证IP+端口号的代码，需要的朋友可以参考下
    2020-01-01
  • js获取客户端网卡的IP地址、MAC地址

    js获取客户端网卡的IP地址、MAC地址

    这篇文章主要介绍了js获取客户端网卡的IP地址、MAC地址的方法,需要的朋友可以参考下
    2014-03-03
  • JavaScript报错：Uncaught TypeError: XXX is not iterable的解决方法

    JavaScript报错：Uncaught TypeError: XXX is 

    在 JavaScript 编程中,“Uncaught TypeError: XYZ is not iterable” 是一种常见的错误,这种错误通常发生在试图对一个非可迭代对象进行迭代操作时,了解这种错误的成因和解决方法,对于编写健壮的代码至关重要,需要的朋友可以参考下
    2024-07-07
  • javascript显示上周、上个月日期的处理方法

    javascript显示上周、上个月日期的处理方法

    这篇文章主要为大家分享了关于javascript实现上周、上个月的处理方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JS实现文本比较差异的示例代码

    JS实现文本比较差异的示例代码

    内部系统上线了一个发版记录发版内容的功能,维护发版记录的同事提出一个可以展示前后文本差异的优化需求, 使的每次变更前可以确认新增了哪些,或者删除了哪些内容,所以本文给大家介绍了基于JS实现文本比较差异,需要的朋友可以参考下
    2023-12-12

最新评论