微信小程序项目_秋泊优选72

67、意见反馈_自定义图片组件

新建自定义组件

意见反馈页面引入组价
pages\feedback\index.json

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs",
    "UpImg":"../../components/UpImg/UpImg"
  },
  "navigationBarTitleText": "意见反馈"
}

自定义组件 标签和样式
components\UpImg\UpImg.wxml

<view class="up_img_wrap">
    <image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1752617175,1775401708&fm=26&gp=0.jpg"></image>
    <icon type="clear" size="23">
    </icon>
</view>

components\UpImg\UpImg.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:-23rpx;
    right: -23rpx;
}

pages\feedback\index.less

page{
    background-color:#eeeeee;
}

.fb_main {
    padding: 20rpx;
    color:#666;

    .fb_title {
  
    }
  
    .fb_tips {
      /*伸缩盒子*/
      display: flex;
      /*换行属性*/
      flex-wrap: wrap; 
      text {
        width:30%;
        padding:10rpx;
        text-align: center;
        background-color:#fff;
        margin: 20rpx 10rpx;
      }
    }
  
    .fb_content {
      background-color:#fff;
      margin-top:20rpx;
      textarea {
        padding:10rpx;
      }
  
      .fb_tool {
        /*伸缩盒子*/
        display: flex;
        /*换行属性*/
        flex-wrap: wrap; 
        padding-bottom:30rpx;
        button{
          margin:0;
          width: 90rpx;
          height: 90rpx;
          font-size: 60rpx;
          padding: 0;
          /*伸缩盒子*/
          display: flex;
          /*水平居中*/
          justify-content: center;
          /*垂直居中*/
          align-items: center;
          margin-left: 20rpx;
          margin-top:20rpx;
          color:#ccc;
        }
        .up_img_item{
          margin-left: 20rpx;
          margin-top:20rpx;
        }
  
      }
    }
  
    .form_btn_wrap {
      margin-top: 20rpx;
      display: flex;
      /*从右向左对齐*/
      justify-content: flex-end;
      button{
        margin: 0;
        background-color: #66ccff;
        width: 30%;
      }
    }
  }

pages\feedback\index.wxml

        <view class="fb_content">
            <textarea placeholder="请描述一下您的问题"></textarea>
            <view class="fb_tool">
                <button>+</button> 
                <view class="up_img_item"><UpImg></UpImg></view>
                <view class="up_img_item"><UpImg></UpImg></view>
                <view class="up_img_item"><UpImg></UpImg></view>
            </view>
        </view>