小程序踩坑(四)之wepy组件

0

写组件

  • 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'!符号。