微信小程序，你所不注意的那些细节

1.text

<text class='content-center'>{{detailObj.content}}</text>
<!-- 这个地方用 text 就可以 ，如果用户输入的有换行就会显示换行  
<text class='content-center'>
      {{detailObj.content}}
</text>  这样写 text 会自带上边距-->

.content-center{
  line-height:52rpx;
  font-family:PingFangSC-Light;
  color: #322D2C;
  word-break:break-all; /*全是英文的话换行自动换行*/
}

2.image

<image 
  mode='aspectFill' 
  src='{{subItem}}' bindtap="previewImg" data-img="{{subItem}}">
</image>
<!-- model="aspectFill" 缩放 图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 -->

3.自定义分享按钮

<view class='btn-new'>
    <view>分享</view>
    <button 
           open-type="share" 
           class='btn-share'
     >
    </button>
 </view>

.btn-new{
  flex: 1;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  color: #AE7950;
  border: 1rpx solid #7A5F4A;
  border-radius: 40rpx;
  font-size: 32rpx;
}
.btn-share{
  position: absolute;
  width:100%;
  height: 80rpx;
  bottom: 3rpx;
  opacity: 0;
  z-index: 2;
}

4.底部固定 中间高度自适应布局

<view class='report-detail'>
  <view class='center-wrap'>
    <view class='empty-box'></view>
  </view>
    <view class='btn-box'></view>
</view>

.empty-box{ /*height 的高度取决于底部固定元素的高度*/
  width: 100%;
  height: 110rpx;
  background-color: transparent;
}

5.添加图片布局 图片多的话可以左右滚动

image.png

<scroll-view class='report-scroll-view' scroll-x="true">
      <view class='scroll-view-inner'>
          <view 
            class='upload-img-box' 
            wx:for="{{tempFilePaths}}" 
            wx:key="*this"
          >
              <image 
                src="{{item.url?item.url:item}}" 
                class='upload-img' 
                bindtap='previewImg'
                data-img = '{{item.url?item.url:item}}'
                mode="aspectFill"
              >
              </image>
              <image 
                src="/image/application_close.png" 
                class='img-delete' 
                bindtap='deleteImg' 
                data-index="{{index}}"
              >
              </image>
          </view>
        <view class='upload-img-box' bindtap='addImg' hidden='{{hideAddBtn}}'>
          <image src="/image/upload.png" class='upload-img' > </image>
        </view>
      </view>
    </scroll-view>

.report-scroll-view{
  width:100%;
}
.scroll-view-inner{
  display: flex;
  width:auto;
}
.upload-img-box{
  display: inline-block;
  flex-shrink: 0; /*flex-shrink: 0; 表示 flex 元素超出容器时，宽度不压缩，这样就能撑开元素的宽度，使得出现滚动条。*/
  width: 160rpx;
  height: 160rpx;
  position: relative;
  margin-right: 16rpx;
}
.upload-img{
  width: 160rpx;
  height: 160rpx;
  display: inline-block;
}
.img-delete{
  position: absolute;
  right: -7rpx;
  top:0;   /*暂时先这样*/
  width:40rpx;
  height: 40rpx;
}

6.去除button的默认样式及设置button的可用样式

button.abled{
  background-color:transparent !important;
  color: #AE7950!important;
  border: 1rpx solid #AE7950;
}
button.btn{
  padding: 0;
}
button.btn::after{border:0}

7.更新设置textArea的值

<textarea 
    placeholder='这一刻，想说点什么...' 
    class='report-content' 
    placeholder-style="color:#322D2C;font-family: PingFangSC-Light;font-size:28rpx"
    maxlength="500"
    bindinput="watchText"
    value="{{textContent}}"
  >
</textarea>

watchText(e) {
    let value = e.detail.value;
    this.data.textContent = value; //这样节省性能
  }

8.wx.showToast 换行

wx.showToast({
      title: '发布成功\r\n我们将在3个工作日内完成审核',
      icon: 'none',
      duration: 1500
    })