微信小程序：意见反馈制作（2）组件（可加图片）

微信小程序：意见反馈制作（2）组件（可加图片）

此篇文章为意见反馈组件，详细做法、
具体做法见微信小程序：意见反馈制作（1）（可加图片）

直接上代码：

1.components/Tabs/Tabs

wxml

<view class="tabs">
  <view class="tabs_title">
    <view
    wx:for="{{tabs}}"
    wx:key="id"
    class="title_item  {{item.isActive?'active':''}} "
    bindtap="handleItemTap"
    data-index="{{index}}"
    >

    {{item.value}}
  </view>
  </view>
  <view class="tabs_content">
    <slot></slot>
  </view>
</view>

wxss

.tabs{}
.tabs_title{
  display: flex;
 
}
.title_item{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 15rpx 0;
}
.active{
  color:var(--themeColor);
  border-bottom: 5rpx solid currentColor;
}
.tabs_content{}

js

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 点击事件
    handleItemTap(e){
      // 1 获取点击的索引
      const {index}=e.currentTarget.dataset;
      // 2 触发 父组件中的事件 自定义
      this.triggerEvent("tabsItemChange",{index});
    }
  }
})

2.components/UpImg/UpImg

wxml

<view class="up_img_wrap">
  <image src="{{src}}"></image>
  <icon type="clear" size="23" color="red">
    
  </icon>
    
</view>

wxss

.up_img_wrap{
  width: 90rpx;
  height: 90rpx;
  position: relative;
}
.up_img_wrap image{
  width: 100%;
  height: 100%;
  border-radius: 15rpx;
}
.up_img_wrap icon{
  position: absolute;
  top:-22rpx;
  right: -22rpx;
}

js

// components/UpImg/UpImg.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    src:{
      type:String,
      value:""
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})