【小程序】踩坑记

1. navigator点击出现阴影，如何去除阴影

做法：将navigator组件的hover-class设置为none：hover-class="none"

<navigator url='index' class="nav" hover-class='none'>
   .....
</navigator>

2. 页面可以左右滑动且出现白色部分

做法：因为页面有元素总宽度超出 750rpx，所以导致页面可以左右滑动且出现白色部分。需要检查好样式，找出超过750rpx的原因，进行修改。

3. 如何进行针对某个页面的下拉刷新：enablePullDownRefresh:true

在小程序的app.json中配置window项的enablePullDownRefresh为true，小程序的所有页面都可以下拉刷新

如果只要某个页面可以下拉刷新，只要配置这个页面的config项enablePullDownRefresh:true即可。

同时配置 backgroundTextStyle: "dark"，实现下拉刷新的点是黑色的

config = {
  navigationBarTitleText: '....',
  enablePullDownRefresh:true,
  backgroundTextStyle: "dark"
}

监听页面的下拉刷新事件

onPullDownRefresh(){
  .... 
  this.loadOrderList(1,true);  //做一些异步请求，更新页面数据
  ....
}

async loadOrderList(page,pullrefresh){
  let result = await getOrderList(page);
  .....
  if (pullrefresh) { // 异步请求函数内写明，如果该函数是通过下拉刷新触发的，请求结束后，需要关闭下拉刷新的动画效果
    wx.stopPullDownRefresh();
  }
  this.$apply();
}

4. 如何禁止组件swiper手动滑动

有时候因为需求，不希望用户可以手动滑动swiper-item

<swiper autoplay="true" circular="true" duration="2000" interval="7000" vertical="true" catchtouchmove='catchTouchMove'>
  <swiper-item wx:for-items="{{list}}" wx:for-index="index" wx:key="index" catchtouchmove='catchTouchMove'>
    ....
  </swiper-item>
</swiper>

methods = {
  catchTouchMove(e){
    return false;
  }
}

5. IOS系统与Android系统Date数据类型比较不兼容https://blog.csdn.net/qq_30604453/article/details/82021634

6. position：absolute布局IOS系统与Android系统不兼容https://blog.csdn.net/qq_30604453/article/details/82116427

7. 如何解决map组件设置z-index无效 https://blog.csdn.net/qq_30604453/article/details/81670740

8. 改变数据然后通过$apply更新到视图层（用到wepy框架）微信开发者工具正常，但是真机测试视图层数据却无更新

https://blog.csdn.net/qq_30604453/article/details/81670509

9. wepy：官方demo报错 pages/index.js 出现脚本错误或者未正确调用 Page()

https://blog.csdn.net/qq_30604453/article/details/80968909

10. 去除button按钮的默认边框线

小程序就是这么神奇，直接 border:none 是没有办法去除按钮的边框线的

得这样写

button::after{
  border: none;
}

11. 增加按钮的点击反馈效果

wx.vibrateLong():使手机发生较短时间的振动（400ms）

wx.vibrateShort():使手机发生较短时间的振动（15ms）

但是该效果只支持iPhone7及以上机型以及少部分安卓机型

bindtap(){
  wx.vibrateShort();
}

12. 优化输入为空时候的提示:利用input的属性placeholder-class

<input placeholder-class="{{isNull?'color-red':''}}"/>

.color-red{
 color:red;
}

testIsNull(val){
 if(val==''){
   this.isNull = true;
   this.$apply();
 }
}

【小程序】踩坑记

猜你喜欢