【微信小程序】scroll-view实现swiper-item间距轮播效果

微信小程序用scroll-view实现轮播间距效果

最新推荐文章于 2024-07-29 14:34:00 发布

原创

最新推荐文章于 2024-07-29 14:34:00 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

本文介绍如何使用scroll-view在微信小程序中模拟swiper-item的间距轮播效果。由于微信小程序的swiper-item不支持设置间距，我们借助scroll-view来达成这一目标。

在这里插入图片描述
说明：看到效果图时，我们可能首先想到swiper组件实现，但是在实际开发中发现swiper-item的间距是无法实现的。这时我们可以用scroll-view去模拟实现。

<!-- 解决方案 -->
<view class="functions">
  <view class="title">
    更懂国人生活方式的家装解决方案
    <text class="desc">满足您的不同装修需求</text>
  </view>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cdgogo

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序scroll-view实现swiper

qq_43628847的博客

09-26

770

最近公司的一个需求，说swiper做的轮播图不流畅，所以我用了scroll-view实现下 <scroll-view enhanced="true" bindscroll="scroll" scroll-x show-scrollbar scroll-into-view="{{toIndex}}" style="width: 100%; white-space: nowrap; height: 100%; padding-top: 10%;" > <block wx:for

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

ScrollView实现轮播图

05-09

使用ScrollView实现轮播图,可以点击,用到SDWebImage

scrollView轮播

MengHuaYin的博客

07-10

417

前几天面试有面试官问我关于scrollView自动轮播的实现，下面就用代码给大家一起分享一下（不足之处还望多多指出）： #define kWith self.view.bounds.size.width #define kHeight self.view.bounds.size.height @interface ViewController () @property

微信小程序scroll-view 组件实现横向滚动

yr123456654321的博客

07-21

1295

<view class='nav_wrap'> <scroll-view class='nav' scroll-x> <view bindtap='activeNav' data-index="{{index}}" class='nav_item {{index==currentIndexNav?"active":""}...

微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)

10-15

总之，微信小程序实现组件顶端固定或底端固定效果在技术上实现起来并不复杂，关键在于理解CSS中的position: fixed;属性，并且在小程序开发的环境中灵活运用。通过以上提供的示例代码和讲解，开发者应该能够掌握在...

【微信小程序】WXML-组件

最新发布

领头羊的博客

07-29

1677

学习微信小程序的组件，参考官方DOC。需要啥组件直接去官方DOC拿code就完事=）

微信小程序坑-子组件的外层容器百分之百无效

小柒的博客

04-15

1563

bug如下 <view class="wrapper">  <scroll-view class="tab" scroll-x="true"> <view wx:for="{{menuList}}" wx:key="index" class="tab-item {{currentTab == index ? 'acti...

微信小程序 swiper 组件实现图片有间隙地轮播

qq_55911180的博客

03-01

1114

模仿网易云音乐 app 首页轮播图的效果，如图：vant 组件库也没有这样的组件，官方里也没有找到好的方法，于是想了一个有意思的方法

【微信小程序】2 - 轮播图：swiper 、scroll-view 、flex

充电五分钟...

03-04

829

文章目录1、swiper2、scroll-view3、flex 注意：点击微信开发工具右上角"详情" ,查看项目信息：本地代码的大小是不能超过2兆的（2兆就是2mb（兆字节） = 2048 kb（千字节），所以我们的大图片都不存本地，我们可以弄个在线库或者弄个图片平台微信里一般icon图标我们存在本地，图片我们不存本地，用线上的图片；如果一张图片很大，那下载这个图片时占据的内存很大，不存在...

用swiper-slide模仿微信小程序之scroll-view

06-04

用swiper-slide模仿微信小程序之scroll-view，可显示三个的滑动区块，描述的不太清楚，我不知道怎么贴图片，就是类似京东的滑动menu区块

微信小程序使用swiper组件实现类3D轮播图

10-18

在写微信小程序时，有写到实现3D轮播图的效果，可以直接使用微信小程序中自带的组件swiper来实现。下面通过实例代码给大家介绍微信小程序轮播图的实现方法，感兴趣的朋友一起看看吧

【小程序】小程序swiper组件实现间距轮播

热门推荐

Y.Cheng的博客

09-19

2万+

swiper组件实现出间距轮播先不急着看实现过程，先看看效果图，如果是你想要的效果那请看下面的过程，不是的话也不浪费大家的时间（就是这么体贴唉）。效果图一效果图二如果是你想要的效果，那就继续往下看，不是那就出门右（别）拐（走）吧。一开始想着如果和swiper.js一样，那就好了，看了下文档就放弃了。网上找了一下还是没找到具体实现方法，就开始自己倒腾，就想到css处理了。第一种效果 ...

（学习笔记）微信小程序 -- 组件-＞视图容器（view、sroll-view、swiper和swiper-item）

LTA_lotion的博客

02-27

1030

组件分为 9 类，视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、无障碍访问。常见的视图容器组件 1） view 2）scroll-view 3）swiper 和 swiper-it ...

小程序之轮播图实现

weixin_46481307的博客

06-12

239

效果图： js代码实现 Page({ data: { //轮播图 indicatorDots: true,//显示面板指示点 autoplay: true,//自动切换 interval: 3000,//自动切换时间间隔 duration: 800,//滑动动画时长 circular: true,//采用衔接滑动 indicatorColor:"#ffdfdc",//指示点颜色 indicatoraAactive-color:"#ff94

小程序swiper间距效果

weixin_54858833的博客

04-10

2404

描述很久没写过小程序了，今天遇到个问题，小程序的swiper怎么实现间距轮播呢？类似以下效果黄色部分为内容灰色为间距我给每个swiper-item设置了margin 发现没有作用，去文档看了swiper的属性这个也尝试了，可能是我算的不对，完全没用啊！但是，我想到一个更容易实现但容易被忽略的办法！解决想了很久的问题，就差那么一点灵性！答案就是，再包一层view缩小宽度！我真是天才！ ...

修改小程序swiper组件面板指示点的样式大小颜色和点之间距离

weixin_43923808的博客

09-15

2848

修改小程序swiper组件面板指示点的样式大小颜色和点之间距离。

利用scroll-view配合swiper进行滑动切页

weixin_51055997的博客

07-13

811

scroll-view配合swiper实现选项卡，左右滑动切换内容，swiper长列表切换

【微信小程序】：实现轮播图3秒滚动

weixin_33919941的博客

07-12

448

wxml模板：（数据一维数组） <scroll-view scroll-y="true"> <swiper autoplay="auto" interval="3000" duration="500"> <block wx:for="{{home_pics}}" wx:for-index="i

微信小程序音乐播放器开发详解与源码实现

微信小程序音乐播放器的开发是一项集前端界面设计、交互逻辑处理与音频功能实现于一体的综合性项目，涉及多个关键技术点和组件应用。本文围绕标题“微信小程序音乐播放器开发[源码]”及描述中提到的功能模块，深入...