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>包裹即可实现弹窗内可滚动,弹窗外不可滚动