微信小程序swiper滑动切换

wxml 添加 Swiper 父级 ，里面包裹 Swiper-item 。把页面内容都用<swiper></swiper>包起来，内部再包裹<swiper-item></swiper-item>里面

js中添加 跳转事件

小程序实现满屏上下滑动效果

写的时候发现网上没有好用的，要么过于复杂，要么不太实用，我就自己整了个简单的

直接上代码部分

//wxml部分

<swiper indicator-dots="true" indicator-color="green" indicator-active-color="red" autoplay="true" interval="5000" duration="1000" circular="true" vertical="true">

<swiper-item wx:for="{{images}}">

<image src="{{item}}" mode="scaleToFill"></image>

</swiper-item>

</swiper>

下面是js部分，大部分都是自动生成的函数，只要在data里面存放地址就行，其他的可以不用管

// pages/template/templatejs

Page({

/

页面的初始数据

/

data: {

images: ["/pages/template/images/1png","/pages/template/images/2png","/pages/template/images/3png","/pages/template/images/4png"]

},

/

生命周期函数--监听页面加载

/

onLoad: function (options) {

},

/

生命周期函数--监听页面初次渲染完成

/

onReady: function () {

},

/

生命周期函数--监听页面显示

/

onShow: function () {

},

/

生命周期函数--监听页面隐藏

/

onHide: function () {

},

/

生命周期函数--监听页面卸载

/

onUnload: function () {

},

/

页面相关事件处理函数--监听用户下拉动作

/

onPullDownRefresh: function () {

},

/

页面上拉触底事件的处理函数

/

onReachBottom: function () {

},

/

用户点击右上角分享

/

onShareAppMessage: function () {

}

})

效果图

iphone5表现效果

在这里插入描述

iphone 12/13 Pro Max表现效果

在这里插入描述

本人前端一般般，可能会有问题，仅供参考

再加上

-webkit-backface-visibility: hidden;

-webkit-transform: translate3d(0, 0, 0);

亲测有效

是的，微信小程序中有一些组件可以实现类似表格不带边框的布局。以下是一些常用的组件：

1 view组件：可以用view组件来实现类似表格的布局。可以使用flex布局来控制子元素的排列方式。

2 swiper组件：可以使用swiper组件来实现多列的滑动列表，类似于表格的效果。

3 scroll-view组件：可以使用scroll-view组件来实现滚动列表，也可以通过设置样式来实现类似表格的效果。

4 rich-text组件：可以使用rich-text组件来渲染富文本内容，也可以通过设置样式来实现类似表格的效果。

需要注意的是，以上组件都需要根据实际需求来选择，并进行样式的调整，以达到最终的布局效果。

    实现轮播功能且高度要自适应。

    使用小程序自带组件swiper。

     关键点 ：就是要计算出当前的高度并赋值给swiper高度。需要计算是由于swiper必须指定高度不能像div一样自动撑开。

    难点：

    1、问题：切换页面返回 由onhide—>onshow时，出现所有的高度会保持在最后计算出的那个值，导致高度自适应效果失效。

         原因：是由于此时imageLoad不再监听。

         解决办法：watch列表，给url加参数（时间戳），使其每次都重新加载，使imageLoad监听。

    2、问题：切换到后台再返回到前台时，初始高度会保持出现在第一张的高度，若切换时非第一张，就会导致给当前高度不正确，被遮挡或者有大片空白。

         原因：给swiper赋值的是 列表里第一张的高度。

         解决办法：后台切回前台时，appdata是保持不变的，而当前排位已被保存变量，所以取当前的高度赋值给swiper高度。

    3、问题：此组件所在页面，下面有跳转到当前页的业务需要，只是渲染数据不同。当返回前一个页面时，初始高度还保留着返回前最后一次的高度，与当前页当前高度不符。

         原因：同页面切换时，appdata没有重新赋值的话就不会变化，最后当前变量取值了最后出现的那个页面的当前。

        解决办法：每切换到一个页面时，在组件里，缓存以页面数:当前为键值的currents对象。返回到某个页面时，通过当前页面数取得当前，从而获得当前初始高度。

PS ： 在设计和解决这些难点时，均遵循着组件的高内聚、低耦合原则，使得更具复用性、稳定性、无依赖。

ps：很多时候开始发现是未解的，待解决之后发现原来并没什么，