小程序开发踩坑笔记

• movable-area穿透性问题

问题描述：movable-area使用position为pixed，遮罩在层级低的页面上时，会导致底下的页面无法响应触摸点击事件。

解决办法：
step1：先在movable-area的css添加pointer-events: none；
step2：然后在movable-view的css添加pointer-events: auto；

• showActionSheet弹窗操作菜单问题

问题描述：使用wx.showActionSheet，在iOS上有取消按钮，在安卓上没有取消按钮，需要强制选择操作菜单。

解决办法：
1、判断系统是安卓，itemList添加一个“取消”操作菜单；
2、开发者自定义一个类似的弹窗操作菜单组件；

• 页面上下分区问题

问题描述：页面顶部有菜单筛选项，剩余部分是列表，想固定菜单栏，让菜单栏不随页面滚动。

解决办法：
step1：wxml代码
<view class="container">
    <!-- 菜单栏 -->
    <view class="nav"></view>
    <!-- 列表视图 -->
    <scroll-view class="list"></scroll-view>
</view>

step2：css代码
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.nav {
    width: 100%;
    height: 100rpx;
}

.list {
    width: 100%;
    flex: 1;
}

• wxss统一变量问题

问题描述：小程序基本都是每个页面page的相应wxss独立编写布局样式，如果做到样式统一管理？使用变量控制即可。

解决办法：
step1：在app.wxss文件添加page样式，并使用“--[变量名]”的格式添加变量，使用方法如下代码所示；
page {
  width: 100%;
  height: 100%;
  --background-color: #f5f5f5;
  --font-size: 32rpx;
}

step2：在需要使用的页面page相应的wxss文件上调用变量即可，格式为“var(--[变量名])”，调用方法如下代码所示；
container {
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  font-size: var(--font-size);
}

ps：如果表述不清晰，可以查看图片。（由于简书的图片，本人不知道如何放大缩小，排版很乱，故给图片地址）
（1）https://upload-images.jianshu.io/upload_images/17066887-3eb444739e2864c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
（2）https://upload-images.jianshu.io/upload_images/17066887-5ac66dd6cca02a2f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240