小程序中滑动展示部分如何写代码

要在小程序中实现滑动展示部分，可以使用小程序自带的swiper组件，具体步骤如下：

1. 在wxml文件中添加swiper组件代码：

```

<swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">卜旁袜让

<swiper-item>

<!-- 第一个滑动页的内容 -->

</swiper-item>

<swiper-item>

<!-- 第二个滑动页的内容 -->

</swiper-item>

<swiper-item>

<!-- 第三个滑动页的内容 -->

</swiper-item>

</swiper>

```

2. 在对应的js文件中设置swiper组件的相关参数，例如：

```

Page({

data: {

indicatorDots: true, // 是否显示指示点

autoplay: true, // 是否自动切换

interval: 5000, // 自动切换时间间隔

duration: 1000 // 滑动动画时长

}

})

```

3. 根据实际需求，设置滑动页的内容样式和布局。

通过以上步骤，就可以在小程序中实现型好橡滑动展示部分了。

```

<!-- 滚动图 -->

<view class="swiper" style="position:relative">

<swiper autoplay="{{true}}" circular="{{true}}" onChange="currentHandle">

        <block a:for="{{swiperList}}">

          <swiper-item class="swiper-box">

            <view class="swiper-item" style="width:100%height:300rpx">

                <!-- lazy-load根据需要 onTap可以点击图片跳转 data-url绑定到跳转的链接-->

              <image lazy-load="{{true}}" mode="scaleToFill" src="{{item.image}}" style="display:flexwidth:100%height:300rpx"

                onTap="swiper" data-url="{{item.url}}" data-index='{{index}}' />

            <镇枣镇/view>

          </swiper-item>

        </block>

      </swiper>

    <!-- 圆点 -->

      <view class="swiper_dot">

        <view class="trans MR10 {{current === index ?'active': ''}}" a:for="{{swiperList}}" a:key="{{index}}"></view>

      </view>

</view>

```

```

data(){

    swiperList:[

        {

            image:'',//图片的路径

            url:""//要跳转的路岩袜径

        },

                {

            image:'',

            url:"御粗"

        }

    ],

    current: 0,//初始化dot

},

//监听current

currentHandle(e) {

console.log(e)

    //改变current的值

    let { current } = e.detail

    this.setData({

      current

    })

},

```

```

.swiper-box {

  padding: 0 30rpx

}

.swiper-item {

  border-radius: 10rpx

  overflow: hidden

}

.swiper_dot {

  display: flex

  flex: 1

  justify-content: center

  position: absolute

  bottom: 16rpx

  left: 42%//通过绝对定位 在滚动图的正下方 具体看自己

}

.MR10 {

  margin-right: 10rpx

}

.trans {

  width: 23rpx

  height: 8rpx

  background-color: #ffffff70

  border-radius: 3.5rpx

  transition: width 0.5s linear

}

.active {

  background-color: #ffffffd7

  width: 67rpx

  transition: width 0.5s linear

}

```

---转自我的自个的

支付宝小程序Swiper 滚动图 带圆点和跳转方式_多甘范科夫斯基的博客-CSDN博客

1.使用touchstart、touchmove和touchend方法，唤桐在touchstart方法中，获取当前触点的位置，然后在touchmove方法中，通过比对当前触点位置和先前记录的培埋触点位置，来判断用户是做左滑动还是右滑动；在touchend方法中，可以根据用户滑动的距离和滑动时间确定最终的滑动 *** 作，从而实现左右滑动功能。

2.使用微信小程序APIswiper，可以在wxml中通过添加swiper元素来实现左右滑动。开发者只需要为swiper指定相关参数（如设置每屏显示的内容、滑动时显示的指示器等），就可以实配链蚂现左右滑动的效果。

---