微信小程序图片显示切换

关注

原创最新推荐文章于 2026-06-16 19:15:00 发布 4.5k 阅读 AI 写同款· GEO 优化 ›

微信小程序开发-图片切换功能，小程序切图功能，给轮播图添加点击左右滑动效果，给轮播图添加点击切换效果，循环切换 微信小程序开发-图片切换功能，小程序切图功能，给轮播图添加点击左右滑动效果，给轮播图添加点击切换效果，循环切换，按钮切换下一张图片，按钮切图，实现在小程序分页中展示多张图片，并利用索引触发来实现切换到上一张和下一张图片的功能。通过维护一个变量来记录当前显示的图片索引，并通过点击事件触发不同的处理函数来实现对应功能，横屏显示阅读详情

比如我们常用的收藏功能,当你收藏了后就显示收藏后的图片,没有收藏一般显示一个比较浅点的颜色,那么这个功能在小程序如何实现呢？因为小程序的组件数据都是绑定的,一般这么写：

   <image wx:if="{{isColect}}" class='collect_img'  src='/images/collection.png' bindtap="onCollect"></image>
     <image wx:else class='collect_img'  src='/images/collection-anti.png' ></image>

wx:if绑定的值是定义在Page中的data:{}中的变量，如果是true就显示上面的,false就是走else.还有一点就是如果有事件触发的话,if 和else都要写,而且方法名是一致的.

还有一种写法就是使用了三元云算法了,

<image  class='collect_img'  src='{{isColect?/images/collection.png:/images/collection1.png}}' bindtap="onCollect"></image>

收录于

微信小程序

干货，微信小程序图片轮播 wxml: <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="1000"> <block wx:for="{{images}}"> <swiper-item> <image src="{{item.url}}" class="slide-image" mode="aspectFill"/> 阅读详情

微信小程序 图片显示切换

相关推荐

微信小程序图片显示切换