在使用swiper组件的时候，如果切换循环swiper-item的图片数组的话，会引起数组长度变化。当切换后的数组长度不及切换前的数组长度时，而恰好swiper此时的current记录的位置已经超出了后面的数组的长度，就会报警告。 [图片] 并且图片显示不出来，情况如下： [图片] 修改前代码: wxml: [代码]<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="355" height="150"/> </swiper-item> </block> </swiper> <button bindtap="changeArr"></button> [代码] [代码]js: data: { imgUrls: ['img1', 'img2', 'img3'] }, changeArr(){ this.setData({ imgUrls: ['img1', 'img2''] }) } [代码] 解决办法非常简单，只需在swiper上面绑定current属性，然后在改变imgUrls时将current的值变成 0 即可 修改后代码： wxml： [代码]<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current=“{{current}}”> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="355" height="150"/> </swiper-item> </block> </swiper> <button bindtap="changeArr"></button> [代码] js： [代码]data: { imgUrls: ['img1', 'img2', 'img3']， current：0 }, changeArr(){ this.setData({ imgUrls: ['img1', 'img2'']， current：0 }) } [代码] 需要注意的是如果改变imgUrls时是需要从后台请求的话，要等到请求完成后再将current的值改成0

也许有人会问，小程序中都是竖直app形态，要横竖屏判断有什么用？即使判断出了横屏状态，你能把小程序横过来？答案是不能的，但是判断当前设备处于横屏或者竖屏状态来实现一些友好的用户体验交互方式的需求确实存在。例如手机横屏，让视频播放自动全屏，手机竖屏，让视频切换回来小屏。 然而，截止至目前，小程序官方的API中并没有提供这样的横竖屏判断的方法。那么我们只能自己想办法实现这样的判断。小程序的设备API中提供了加速度计的监听方法，使用方法如下： [代码]wx.onAccelerometerChange([代码][代码]function[代码][代码](res) {[代码] [代码]  [代码][代码]console.log(res.x)[代码] [代码]  [代码][代码]console.log(res.y)[代码] [代码]  [代码][代码]console.log(res.z)[代码] [代码]})[代码] 加速度计的三轴以下是一般移动设备的加速度计三轴坐标系示例图： [图片] 以手机竖直面向用户为例，加速计的三轴坐标系统的X、Y、Z轴定义如下： 沿着手机屏幕顶部向上是Y轴正方向，向下是Y轴负方向； 当手机顶部朝上时，沿着手机屏幕向右是X轴正方向，向左是X轴负方向； 正对手机时，垂直屏幕向外是Z轴正方向，垂直屏幕向里是Z轴负方向； 当手机处于静止状态时，手机此时只受一个重力加速度(1g=9.8m/s²)的作用，加速度计返回的res.x、res.y、res.z的值就是设备的三轴受到的加速度的值，取值范围从[-1g,1g]。设备以不同方式放置时，x/y/z的值如下： [图片] 计算姿态角在stackoverflow上找到了根据加速度计三轴的值计算姿态角公式（https://stackoverflow.com/questions/3755059/3d-accelerometer-calculate-the-orientation），经过结合设备的三轴坐标方向对公式进行调整，最终得出了公式： [代码]Pitch = atan2(Y, Z) * 180/M_PI;Roll = atan2(-X, sqrt(Y*Y + Z*Z)) * 180/M_PI;[代码] [代码][代码]Roll = atan2(-X, sqrt(Y*Y + Z*Z)) * 180/M_PI;[代码][代码] Roll（绕Y轴旋转的角度） 当设备绕着自身Y轴旋转时（表示手机左侧或右侧翘起的角度），该角度值将会发生变化，取值范围是-90到90度。 Pitch（绕X轴旋转的角度） 当手机绕着自身的Y轴旋转（表示手机顶部或尾部翘起的角度），该角度会发生变化，值的范围是-180到180度。 [图片] 接下来就是根据自己对横竖屏角度的观测，再结合微信小程序中，视频全屏只能以手机向左旋转方式全屏的特性，只对用户左侧横屏判断为横屏状态，实现代码片段如下： [代码]  // 0为竖屏，1为横屏[代码][代码]  [代码][代码]let lastState = 0;[代码][代码]  [代码][代码]let lastTime = Date.now();[代码] [代码]  [代码][代码]wx.startAccelerometer();[代码] [代码]  [代码][代码]wx.onAccelerometerChange((res) => {[代码][代码]    [代码][代码]const now = Date.now();[代码][代码]    [代码] [代码]    [代码][代码]// 500ms检测一次[代码][代码]    [代码][代码]if[代码] [代码](now - lastTime < 500) {[代码][代码]      [代码][代码]return[代码][代码];[代码][代码]    [代码][代码]}[代码][代码]    [代码][代码]lastTime = now;[代码] [代码]    [代码][代码]let nowState;[代码] [代码]    [代码][代码]// 57.3 = 180 / Math.PI[代码][代码]    [代码][代码]const Roll = Math.atan2(-res.x, Math.sqrt(res.y * res.y + res.z * res.z)) * 57.3;[代码][代码]    [代码][代码]const Pitch = Math.atan2(res.y, res.z) * 57.3;[代码] [代码]    [代码][代码]// console.log('Roll: ' + Roll, 'Pitch: ' + Pitch)[代码] [代码]    [代码][代码]// 横屏状态[代码][代码]    [代码][代码]if[代码] [代码](Roll > 50) {[代码][代码]      [代码][代码]if[代码] [代码]((Pitch > -180 && Pitch < -60) || (Pitch > 130)) {[代码][代码]        [代码][代码]nowState = 1;[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]        [代码][代码]nowState = lastState;[代码][代码]      [代码][代码]}[代码] [代码]    [代码][代码]} [代码][代码]else[代码] [代码]if[代码] [代码]((Roll > 0 && Roll < 30) || (Roll < 0 && Roll > -30)) {[代码][代码]      [代码][代码]let absPitch = Math.abs(Pitch);[代码] [代码]      [代码][代码]// 如果手机平躺，保持原状态不变，40容错率[代码][代码]      [代码][代码]if[代码] [代码]((absPitch > 140 || absPitch < 40)) {[代码][代码]        [代码][代码]nowState = lastState;[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]if[代码] [代码](Pitch < 0) { [代码][代码]/*收集竖向正立的情况*/[代码][代码]        [代码][代码]nowState = 0;[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]        [代码][代码]nowState = lastState;[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]}[代码][代码]    [代码][代码]else[代码] [代码]{[代码][代码]      [代码][代码]nowState = lastState;[代码][代码]    [代码][代码]}[代码] [代码]    [代码][代码]// 状态变化时，触发[代码][代码]    [代码][代码]if[代码] [代码](nowState !== lastState) {[代码][代码]      [代码][代码]lastState = nowState;[代码][代码]      [代码][代码]if[代码] [代码](nowState === 1) {[代码][代码]        [代码][代码]console.log([代码][代码]'change:横屏'[代码][代码]);[代码][代码]      [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]        [代码][代码]console.log([代码][代码]'change:竖屏'[代码][代码]);[代码][代码]      [代码][代码]}[代码][代码]    [代码][代码]}[代码][代码]  [代码][代码]});[代码] 然后就可以在横竖屏切换的状态下，去切换视频的横竖屏了 [代码]if[代码] [代码](state === 1) {[代码][代码]  [代码][代码]video.requestFullScreen();[代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码]  [代码][代码]video.exitFullScreen();[代码][代码]}[代码] 其他 另外，在这里发现小程序的一个小bug，就是当进入一个页面，马上就调用requestFullScreen()方法去拉起视频全屏时，会破坏整个页面的布局，并且再调用全屏方法时，视频就无法再全屏了，像这样： [图片] 所以为了防止用户直接以横屏的状态进入一个视频播放页，而我们的横屏判断检测生效立即触发全屏引发bug，我将监听横竖屏的事件通过setTimeout(listener, 3000)延迟3s监听，这样横屏才不会触发bug。 最后 文中的很多知识点很多都是从网络文章学来，可能存在错误的理解，如有错误，欢迎各位指正。 最后再打个广告，欢迎喜欢看游戏直播的小伙伴来试用我们的《TG电竞》直播小程序，这里聚合各大平台的知名主播，总有一款适合你哦。 [图片]