微信小程序踩坑

1、利用swiper组件实现滑动选项卡

出现的问题:swiper限制高度，默认是150px;ios系统上下滑动会有卡顿

解决办法：
在swiper子元素swiper-item中使用<scroll-view scroll-y="true" style="height:{{winHeight}}rpx">
//【高度必须设置】
wxss设置：swiper{
  display: flex;
  height: 100%;
}
swiper-item {
 height: 100%;
 overflow:scroll;
 overflow-x:hidden;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

2、阻止遮罩层下的页面滚动

只需要在遮罩层上加上catchtouchmove='ture'
需要注意的是：因模拟器无touch事件，需在真机上测试
例如：
<view class='mask' catchtouchmove='ture'></view>

• 1
• 2
• 3
• 4

3、微信小程序 image图片组件实现宽度固定 高度自适应

<image class="empty-icon" src="/pages/image/list-emptyx2.png" mode="widthFix"></image>

• 1

4、去除button默认样式

1、使用::after 伪类选择器去除边框
button::after {
  border: none;
}
2、去除默认背景色。
button {
  background: none;
}
3、去掉默认的圆角：
button {
  border-radius:0;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

5、微信小游戏（小程序）视频激励广告

RewardedVideoAd.onClose(function callback) 接口，
第一次回调没问题，但是从第二次起，会不断叠加回调。也就是第二次调用的时候，除了执行本次回调的方法，还会把第一次回调的方法也执行一次。疑似把每次回调都用队列保存了

解决办法： videoAd.offClose()方法

this.videoAd.onClose(res => {
if(!this.videoAd) return
this.videoAd.offClose()
// 用户点击了【关闭广告】按钮
// 小于 2.1.0 的基础库版本，res 是一个 undefined
if (res && res.isEnded || res === undefined) {
  // 正常播放结束，可以下发游戏奖励
}
else {
// 播放中途退出，不下发游戏奖励
}
})

1、利用swiper组件实现滑动选项卡

出现的问题:swiper限制高度，默认是150px;ios系统上下滑动会有卡顿

解决办法：
在swiper子元素swiper-item中使用<scroll-view scroll-y="true" style="height:{{winHeight}}rpx">
//【高度必须设置】
wxss设置：swiper{
  display: flex;
  height: 100%;
}
swiper-item {
 height: 100%;
 overflow:scroll;
 overflow-x:hidden;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

2、阻止遮罩层下的页面滚动

只需要在遮罩层上加上catchtouchmove='ture'
需要注意的是：因模拟器无touch事件，需在真机上测试
例如：
<view class='mask' catchtouchmove='ture'></view>

• 1
• 2
• 3
• 4

3、微信小程序 image图片组件实现宽度固定 高度自适应

<image class="empty-icon" src="/pages/image/list-emptyx2.png" mode="widthFix"></image>

• 1

4、去除button默认样式

1、使用::after 伪类选择器去除边框
button::after {
  border: none;
}
2、去除默认背景色。
button {
  background: none;
}
3、去掉默认的圆角：
button {
  border-radius:0;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

5、微信小游戏（小程序）视频激励广告

RewardedVideoAd.onClose(function callback) 接口，
第一次回调没问题，但是从第二次起，会不断叠加回调。也就是第二次调用的时候，除了执行本次回调的方法，还会把第一次回调的方法也执行一次。疑似把每次回调都用队列保存了

来源：CSDN

作者：s先生的d小姐

链接：https://blog.csdn.net/weixin_44326389/article/details/103736346