小程序中的各种坑

公司准备APP和小程序并行开发，所以需要开始着手小程序的编写，由于之前只是写过小程序demo，系统开发还是第一次，此篇文章记录小程序中遇到的各种坑。
1、小程序button按钮自带边框效果，而且直接设置border无法去掉，需要设置：after的样式

.login-user-code button {  border: 1rpx solid #ffd530;
}.login-user-code button::after {  border: 1rpx solid #ffd530;
}

2、登录后跳转到首页时，如果首页在tabBar中设置了路径，就不能用wx.navigateTo跳转，需要用wx.switchTab跳转才能成功；
3、给view设置背景图片的时候，不能用本地图片，会导致无法加载。

background: url('../image/bisai-diwen.png' ) no-repeat center;

image.png

使用网络图片后正常

 background: url('http://cdn.spbcn.org/Fengyong/Images/bisai-diwen.png' ) no-repeat center;

4、这个不算小程序的坑，之前H5没写过，刚知道，设置背景图片透明，但是文字不透明；
需要用两个view来实现，父容器设置背景图片，子容器通过rgba设置透明度，就可以实现图片透明，子容器中的文字不透明；
代码：

 <view class='study-body'>
    <view class='study-body-bg'>
        测试测试测试测试测试测试    <view class='study-body-list'></view>
    </view>
  </view>

css代码：
父容器

.study-body {  width: 100%;  /* height: 800rpx; */
  background: url('http://cdn.spbcn.org/Fengyong/Images/bisai-diwen.png' ) no-repeat center;  background-size: cover;  padding-bottom: 50rpx;
}

子容器

.study-body-bg {  background:rgba(255, 255, 255, 0.7);
}

效果对比：

image.png

image.png

5、小程序中view实现内容超出后不换行，显示为左右滑动，而且隐藏滚动条；
省市级三级联动中，小程序内置了组件，直接用picker组件，设置mode="region"即可，但是内哦让区域无法用input显示，只能用view，所以会出现省市县名称过长时超出view宽度；
wxml样式

<view class="picker"> {{region[0]}}/{{region[1]}}/{{region[2]}} </view>

wxss样式为

.picker{  line-height: 60rpx;  overflow-x: auto;  white-space: nowrap;
}.picker::-webkit-scrollbar {  display: none
}

最终显示效果为：

image.png

作者：阿布_0caf
链接：https://www.jianshu.com/p/2489504c86b7