小程序知识点分享（三）

一、 swiper组件修改样式

固定指示条宽度，根据轮播图片数量均分 swiper的class=“swiper-box”

.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
  top: 186rpx;
  display: flex;
  width: 220rpx;
}
.swiper-box .wx-swiper-dot {
  flex-grow: 1;
  height: 5rpx;
  display: inline-flex;
  justify-content: center;
  margin:0 -14.3rpx;
  border-radius: 0;
}
.swiper-box.hideDot .wx-swiper-dot{
  height: 0;
}
.swiper-box .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: rgba(0, 0, 0, 0.2);
}
.swiper-box .wx-swiper-dot-active::before {
  background: #fff;
}
.swiper-box-item>image {
  width: 100%;
  height: 100%;
}

二、不弹窗的情况下获取用户头像 查看详情

三、设置界面全屏

在app.json文件中设置（注：）

{
  "pages": [],
  "window": {
    "navigationStyle": "custom"
  }
}

四、textarea层级过高穿透问题

由于textarea和input是原生组件，所以其层级最高，存在穿透问题（注：不要幻想把按钮的层级设置成很高以此来覆盖textarea…妄想）。
我的办法是最开始的时候不显示textarea，用rich-text代替显示，当用户点击rich-text的时候隐藏rich-text，显示textarea，然后当textarea失焦的时候隐藏textarea，把用户输入的信息显示在rich-text里，当然，这里会存在换行的问题，下面是判断换行并让rich-text能正确显示换行符的正则表达式：

 
 
 
 hideArea: function(e) {
    this.data.userInfo.my_desc = e.detail.value;
    this.data.userInfo["myRealDesc"] = this.data.userInfo.my_desc.replace(/\n/g, '
');
    this.setData({
      isShowArea: false,
      userInfo: this.data.userInfo
    })
  }

五、在本页面触发上一个页面的方法

let pages = getCurrentPages();
let prevPage = pages[pages.length - 2]; //上一个页面
prevPage.getList();//触发上一个页面的方法
 //设置上一个页面的数据
prevPage.setData({
	userInfo: prevPage.data.userInfo,
    tempData: prevPage.data.tempData,
    contactInfo: prevPage.data.contactInfo
});

六、Android6.7.2以下版本wx.showActionSheet无法关闭，没有取消选项

显然，这种情况下当然是要自己手动加一个没有任何事件的取消选项上去啦，

let itemList = [];
 if (system[0].indexOf("Android") > -1 && parseInt(system[1]) < 672) {
   itemList.push("取消");
 }
wx.showActionSheet({
    itemList: itemList,
    itemColor: "#232323",
    success: function(res) {
      if (res.tapIndex != 4) {//这里的4就是你手动添加的取消所在的索引
       //在这里做除了取消之外其他选项的正确操作
      }
   }
})