横向滑动（scroll-view）嵌套for循环

最新推荐文章于 2024-05-08 15:10:01 发布

smallwhite_paper

最新推荐文章于 2024-05-08 15:10:01 发布

阅读量794

点赞数

分类专栏：微信小程序文章标签：前端

本文链接：https://blog.csdn.net/smallwhite_paper/article/details/106709763

版权

本文介绍了如何在微信小程序中使用scroll-view组件实现横向滑动效果，关键步骤包括设置scroll-x属性为true，调整scroll-view和item的宽度及white-space属性，以及利用display: inline-block使元素水平排列。通过这种方式，可以实现一个动态展示的横向滚动列表。

摘要由CSDN通过智能技术生成

2设置横向滑动要点

（1）设置横向滑动 scroll-x=”true”。
（2）scroll-view设置宽度及white-space属性。
（3）item设置display: inline-block属性。

xml布局

<view class="container">
   // scroll-x=”true设置横向滑动
   //scroll-view设置宽度
    <scroll-view scroll-x="true">
        <view class

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

smallwhite_paper

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信小程序 scroll-view 嵌套 for 循环

zhangxy的博客

09-26

2295

问题描述： scroll-view 内嵌套写死的内容时，可正常滑动，嵌入for循环内容时换行无法滑动。给scroll-view加上style="white-space: nowrap;"不换行就解决了。修改后代码 <scroll-view scroll-x="true" style="white-space: nowrap;"> <view wx:for...

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

01-20

1、布局及样式等（1）xml布局 {{item.title}} {{item.content}} （2）wxss scroll-

参与评论您还未登录，请先登录后发表或查看评论

实现UISCrollView循环滚动

jh_123789的专栏

02-27

909

1.循环滚动每次滚动后都将scrollview的offset设置为中间的一页若本次滚动是向前一页滚动，则把三页都向后放置，最后一页放到开头若本次滚动是向后一页滚动，则把三页都向前放置，第一页放到末尾初始化UISCrollView float x,y,width,height; x = WIDTH_OFF_SET; y = HEIGH

ForEach/循环, ScrollView/滚动视图的使用

Hanyang Li的专栏

05-24

144

ForEach/循环, ScrollView/滚动视图的使用

UIScrollView 循环滚动，代码超简单

万花筒邪灵噶的博客

07-23

5881

现在很多应用里面多多少少都用到了循环滚动，要么是tu'p

小程序 - swiper中嵌套使用scroll-view

热门推荐

sinat_33184880的博客

01-06

1万+

效果如下需要注意的地方 swiper标签有默认的高度，展示更多的话需要另外设置height值这里的scroll-view设置占满整个屏幕，height设置100%；swiper的height设置成屏幕的高度（除去tab栏的高度）,需要微信提供的api获取设备屏幕高度数据 wx.getSystemInfo({ success: (res) => { let w...

实现UIScrollView循环滚动

小龙的博客

11-11

419

实现UIScrollView循环滚动我们可以在scrollview里面这样添加图片的顺序， img 4, img1, img2, img3, img 4 ,img1,img 2,位置分别是 0，1，2，3，4，5，6 - (void)viewDidLoad { [super viewDidLoad]; //创建s

关于scroll-view嵌套for循环的问题

weixin_43421060的博客

01-05

1552

关于scroll-view嵌套for循环的问题这是一个对新手很烦的一个坑吧直接上代码，重点最后有总结 wxml的代码 <scroll-view class='scroll-list' scroll-x="true"> <view class='scroll-for' wx:for='{{second}}' wx:key="unique" data-index='{{...

scrollView 循环滚动

漂流少年的博客

03-29

850

思路：比需要创建的滚动图片多添加两个，在第一个图片前面把最后个添加进去，最后面个图片后面添加第一个图片。 1、在第一个显示的图片前面添加最后一张图片 UIButton *button0 = [UIButton buttonWithType:UIButtonTypeCustom]; button0.frame = CGRectMake(0, 0, kSc

ScrollView计时器循环滚动

全干工程师

04-19

1785

MainActivity中代码如下，我都做了相关的注释，很清晰package com.safly.myapplication;import android.animation.Animator; import android.animation.ObjectAnimator; import android.animation.ValueAnimator; import android.graphic

封装scrollView 循环滚动

FIGHTING的专栏

08-15

1998

今天给大家送点干货：封装的简单实用及介绍，希望大家共同学习共同进步封装在变成过程中非常重要，可以提高代码的复用性，可以高效的完成项目，并且可以对外部提供接口大家可以看一下封装之前和封装之后 viewDidLoad 中的代码量，未封装之前基本上所有的代码都写在了控制器内，十分的麻烦封装之后有少量的代码就可以完成特定的功能！封装之前： // // QHMainCo

UIScroll View无限循环的超级简单的实现

JACKSHIPAILUO的博客

03-21

1013

UIScrollView创建后必须要被添加到其他的视图控制器或者view中。初始化UIScrollView后必须设置contentSize属性，这个属性的值决定了可以滚动的具体的size。因为我们使用UiscrollView是为了展示超过某一区域的内容，所以我们在设置contentSize的值时，必须大于等于其初始化时的frame的值。 UIScrollView可以看做是由一个窗口和一个背景板组成，窗口是我们可以看到的区域，就想我们坐火车时看到的那样，当窗口外面的风景在移...

无限循环的ScrollView，原理以及实现，自动循环！！！

小猴子

02-24

3075

本人～菜鸟一枚，这两天闲着无聊，就寻思自己写一下ScrollView自动无限循环，借鉴了不少别人写的，但发现还都不是很全面，自己整合一下，以备初学者们参观研习，废话不多说，直接上代。首先是.h @protocol ImageScrollViewDelegate NSObject> //@required //必须不必须看你自己了。 -(void)didSelectImageAtInd

无限循环ScrollView

ZC_Huang的博客

07-18

1026

无限循环ScrollView(方法一)实现无限循环ScrollView效果，对于一些人来说，确实有点头痛。最近我也碰到了这类问题，在网上查了好多资料，也烦了好久。虽然网上有详解，不过讲解的过于简单；有demo，但功能也没有达到我的需求。因此，我在前人的基础上，自己写了一个demo，拿出与大家分享，希望能帮到大家。设计思路在设置滑动区域大小时，只设置容纳3个图片视图的大小。滑动时，根据滑动的偏移量进行

Unit 高效开发系列 - 第四章无限循环滑动ScrollView封装

huiyue2007的博客

12-23

1194

Uinty高效开发系列主要包含一系列的Unity开发实例，主要来源于笔者的一个3D游戏项目和一个手机APP项目，适合利用Unity开发游戏或手机APP场景。本章节描述无限滑动ScrellView.

flex-grow 与flex-shink

Jonn1124的博客

08-02

4084

flex-grow flex-grow的作用是灵活的分配父元素的剩余空间给子元素，强调的是父元素的剩余空间每个子元素默认的flex-grow为0，及不划分剩余空间所有子元素的flex-grow的总和表示把父元素的剩余空间分为多少份每个子元素的flex-grow的值：又表示占父元素剩余空间的几份如果flex-grow的值为小数，就是表示占剩余空间的百分比，如果小数小于1，就会有剩余空间没有被分配，会留白。 flex-shink flex-shink：表示超出父元素宽高的部分按照特定比例进行压缩（

小程序scroll-view 点击函数滚动到指定元素