问题描述:movable-area使用position为pixed,遮罩在层级低的页面上时,会导致底下的页面无法响应触摸点击事件。
解决办法:
step1:先在movable-area的css添加pointer-events: none;
step2:然后在movable-view的css添加pointer-events: auto;
问题描述:使用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;
}
问题描述:小程序基本都是每个页面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