小程序中 swiper添加左右按钮键

最新推荐文章于 2024-07-25 17:40:48 发布

liyan882

最新推荐文章于 2024-07-25 17:40:48 发布

阅读量781

点赞数

分类专栏：微信小程序文章标签：小程序 javascript typescript

本文链接：https://blog.csdn.net/u014077467/article/details/125212951

版权

微信小程序专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了如何使用WXML和JavaScript在微信小程序中实现一个带有指示器的轮播图组件，通过`swiper`组件展示多张图片，并提供了上一张和下一张的切换功能。代码展示了如何设置图片路径、指示器样式和事件处理函数。

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

1、index.wxml中

<view class="materialBigImg">
  <swiper indicator-dots circular interval="2000" duration="500" indicator-color="rgba(255, 255, 255, .5)" indicator-active-color="#fff" current="{{swiper.current}}">
    <swiper-item wx:for="{{swiper.imgUrls}}" wx:key="index">
      <image src="{{offlineImgUrl+item}}" mode="widthFix"></image>
    </swiper-item>
  </swiper>
  <view class="prevBtn" bindtap="prevImg">
    <image src="{{icon.prevBtn}}" mode="widthFix"></image>
  </view>
  <view class="nextBtn" bindtap="nextImg">
    <image src="{{icon.nextBtn}}" mode="widthFix"></image>
  </view>
</view>

2、js中代码

data:{
//素材图片数据
    swiper: {
      imgUrls: [
        'materialImg.jpg',
        'materialImg.jpg',
        'materialImg.jpg',
      ],
      current: 0,
    },
}
/*
  *@Description: 查看上一张
  *@MethodAuthor: LiJuncai
  *@Date: 2022-06-09 17:50:26
 */
 prevImg: function () {
   var swiper = this.data.swiper;
   var current = swiper.current;
   swiper.current = current > 0 ? current - 1 : swiper.imgUrls.length - 1;
   this.setData({
     swiper: swiper,
   })
 },
 /*
 *@Description: 查看下一张
 *@MethodAuthor: LiJuncai
 *@Date: 2022-06-09 17:50:26
*/
 nextImg: function () {
   console.log(2);
   var swiper = this.data.swiper;
   var current = swiper.current;
   swiper.current = current < (swiper.imgUrls.length - 1) ? current + 1 : 0;
   this.setData({
     swiper: swiper,
   })
 },