小程序踩坑（四）之wepy组件

写组件

• navBar.wepy

  <template>
  <view class="navBar {{iphoneX ? 'iphoneX-tabBar' :''}}">
    <view class="navBar-bg"></view>
    <view class="navBar-content" wx:if="{{!showExam}}">
      <view class="navBar-title">{{tabBarTitle}}</view>
      <image wx:if="{{returnIcon}}" class="icon-left" src="https://16bit.sunlands.com/p/static/ko-mp/left-icon.png" @tap="navigateBack" />      
    </view>
  </view>
  </template>
  <script>
  import wepy from 'wepy'
  export default class NavBar extends wepy.component {
  data = {
    iphoneX: wx.getStorageSync('iphoneXStatus')
  }
  props = {
    showExam: Boolean,
    returnIcon: {
      type: Boolean,
      twoWay: true
    },
    tabBarTitle: String,
  }
  methods = {
    navigateBack() {
      wx.navigateBack({
        delta: 1
      })
    }
  }
  }
  </script>
  

• less

  <style lang="less">
  .navBar{
  position: relative;
  padding-top: 40rpx;
  width: 100vw;
  height: 88rpx;
  .navBar-bg{
    width: 100%;
    height: 100%;
  }
  .navBar-content{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 88rpx;
    padding-top: 40rpx;
    background: #FFFFFF;
    .navBar-title{
      width: 100vw;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      font-size: 32rpx;
      font-weight: 700;
      color: #000000;
    }
    .icon-left{
      position: absolute;
      left: 14rpx;
      bottom: 11rpx;
      width: 34rpx;
      height: 34rpx;
      padding: 16rpx;
    }
  }
  .iphoneX-tabBar{
  padding-top: 88rpx;
  .navBar-content{
    padding-top: 88rpx;
  }
  }
  </style>
  

引入组件

• index.wepy

  import wepy from 'wepy'
  import NavBar from '../components/navBar';
  export default class Index extends wepy.page {
    components = {
        'nav-bar': NavBar
    }
  }
  

使用组件

  <nav-bar :returnIcon.sync='returnIcon' :tabBarTitle.sync="tabBarTitle"></nav-bar>

注意：
在使用组件中，组件上传值要与组件内定义的类型一致，:returnIcon.sync='returnIcon'，returnIcon为Boolean类型；
且不支持:returnIcon.sync='!returnIcon'，!符号。