小程序踩坑

167 阅读2分钟

1、前言

  • 小程序实践中遇到的一些想要记录下的问题与解决方法
  • 持续更新

2、修改上一页或几页的数据

  • 小功能,当时不知道,差点就在url上加了n个参数用来跳转
  • 场景:页面1跳转到页面2,在页面2操作后需要再跳转回页面1,此时页面1的数据由于页面2的修改发生了变化需要更新
//现有api,获取页面栈
let pages = getCurrentPages();
//上一页
let prevPage = pages[pages.length - 2];
prevPage.setData({
    name: 'Nancy',
    age: 18
});
//回退到上一页
wx.navigateBack({ delta: 1 });

3、ios禁止上下滑动

  • 页面有弹窗出现时,要求弹窗里的内容可以上下滑动,弹窗外的页面不能滚动
  • 试过很多方法,大部分都是安卓正常,ios无法实现
  • 摸索的时候看到有些人也是使用了如下的方法,但是没有生效,可以检查一下是否弹窗的css中使用了 overflow:scroll,如果有,删掉即可,小程序中使用这个属性似乎会有一些冲突,使用<scroll-view></scroll-view>代替overflow:scroll
  • 实现方法不需要改动弹窗外禁止滚动页面的样式,只需修改弹窗即可
  • 实现代码如下(弹窗):

<view class="wrapper" catch:touchmove="stop">
   <view class="mask">蒙层</view>
   <scroll-view scroll-y="{{true}}">
    <view>弹窗内滚动内容</view>
   </scroll-view>
</view>
.wrapper {
    width: 100%;
    height:100%;
    position: fixed;
    bottom: 0;
    left: 0;
}
.mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.84);
    position: fixed;
    bottom: 0;
    left: 0;
}
  • 上述代码中使用的stop函数在js中写个空函数即可
  • 在弹窗的最外层view中使用catch:touchmove禁止touchmove事件向上冒泡,此时会导致弹窗内需要滚动的内容也无法滑动,因此在滚动内容外使用<scroll-view></scroll-view>包裹即可实现弹窗内可滚动,弹窗外不可滚动