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" 縮放 圖片通常只在水平或垂直方向是完整的，另一個方向?qū)l(fā)生截取。 -->

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 元素超出容器時，寬度不壓縮，這樣就能撐開元素的寬度，使得出現(xiàn)滾動條。*/
  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; //這樣節(jié)省性能
  }

8.wx.showToast 換行

wx.showToast({
      title: '發(fā)布成功\r\n我們將在3個工作日內(nèi)完成審核',
      icon: 'none',
      duration: 1500
    })

\