微信小程序——左右滑动切换页面

微信肆睁小程序的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。

这三个事件最重要的属性是pageX和pageY，表示X，Y坐标。

touchstart在触摸开始时触发事件

touchend在触摸结束时触发事件

touchmove触摸的过程中不断激发这个事件

这三个事件都有一个timeStamp的属搏睁性，查看timeStamp属性，可以看到裂银岁顺序是touchstart =>touchmove=>touchmove =>··· =>touchmove =>touchend。

页面中view设置width:100%之后,页面右边会多出一块白区域,并且可以左右滑动,解决方法是给这个view加一个box-sizing:border-box

2.

直接给最外层的view设置一个overflow-x:hidden//裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话进行隐藏

3.

在json文件里租冲面加 "disableScroll": true

4.

给page一个d性盒子 page { width:100%display: flex} 然后将page下面颤郑的根元素盒子宽度设茄型颂为100%,overflow:

要在小程序中实现滑动展示部分，可以使用小程序自带的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. 根据实际需求，设置滑动页的内容样式和布局。

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

---