美文网首页
小程序开发踩坑笔记

小程序开发踩坑笔记

作者: 开发匠007 | 来源:发表于2019-03-29 10:26 被阅读0次
  • 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://img.haomeiwen.com/i17066887/3eb444739e2864c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
(2)https://img.haomeiwen.com/i17066887/5ac66dd6cca02a2f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

相关文章

  • 小程序开发踩坑笔记

    movable-area穿透性问题 showActionSheet弹窗操作菜单问题 页面上下分区问题 wxss统一...

  • 开发微信小程序分页功能的坑

    微信小程序开发分页的坑 微信小程序开发中list列表经常要进行分页处理,踩坑在所难免。 app.json wxml...

  • 微信小程序保持登录态

    随着小程序的使用越来越广泛,公司也逐步开始了小程序项目的开发。本人作为公司开发小程序的试水员,必不可少的就是踩坑。...

  • 小程序踩坑笔记

    注意: 作者尚出于对小程序的摸索结算, 观点和经验会尽量附上依据和出处, 内容的准确性需要自行斟酌. 内容会不断加...

  • 小程序与后端联调踩坑

    小程序与后端联调踩坑 本次练习是以springboot作为后端开发框架、微信小程序做前端交互。 后端代码截图: s...

  • Taro + 小程序开发踩坑

    Image不能绑定触摸移动事件, 无法触发 Canvas 需要设置属性type='' 才能使用draw方法 com...

  • 小程序开发踩坑记录

    使用wepy框架 data中定义数据若为对象,UI部分不能动态获取并触发重新渲染 以上代码,Label初始化显示为...

  • 那些抖音小程序踩过的坑

    抖音作为入局小程序开发的新平台,在小程序开发支持上还是存在很多小问题。在这里就细数一下我做抖音小程序踩过的一些坑和...

  • 列表渲染 wx:key 的作用、条件渲染 wx:if 与 hid

    这是微信小程序踩坑系列的第三篇,想要了解更多关于微信小程序开发的那些事,欢迎关注我的《微信小程序》专栏。 前言 开...

  • 微信小程序脚本语言 WXS 怎么用

    这是微信小程序踩坑系列的第二篇,想要了解更多关于微信小程序开发的那些事,欢迎关注我的《微信小程序》专栏。 前言 前...

网友评论

      本文标题:小程序开发踩坑笔记

      本文链接:https://www.haomeiwen.com/subject/bywkbqtx.html