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

68、意见反馈_动态功能（选择显示图片）

1 点击“+”触发tap点击事件
pages\feedback\index.wxml

<button bindtap="handleChooseImg">+</button> 

调用小程序内置的选择图片的api（wx.chooseImage）

获取到图片的路径数组
把图片路径存到data的变量中
页面就可以根据图片数组进行循环显示自定义组件
pages\feedback\index.js

  // 点击“+”选择图片
  handleChooseImg(){
    // 调用小程序内置的选择图片api
    wx.chooseImage({
      // 同时选中的图片的数量
      count: 9,
      // 图片的格式 原图 压缩
      sizeType: ['original', 'compressed'],
      // 图片的来源 相册 照相机
      sourceType: ['album', 'camera'],
      // 成功之后回调函数
      success: (result) => {
        console.log(result);
      }
    });  
  }

点击+按钮添加图片

存到data中便于页面渲染
pages\feedback\index.js

// pages/feedback/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id: 0,
        value:"体验问题",
        isActive: true
      },
      {
        id: 1,
        value:"商品、商家投诉",
        isActive: false
      }
    ],
    // 被选中的图片路径数组
    chooseImgs:[]
  },

  // 标题点击事件从子组件传递过来
  handleTabsItemChange(e){
    console.log(e);
    // 1 获取被点击的标题索引
    const {index}=e.detail;
    // 2 修改源数组
    let {tabs}=this.data;
    tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
    // 3 赋值到data中
    this.setData({
      tabs
    })
  },

  // 点击“+”选择图片
  handleChooseImg(){
    // 调用小程序内置的选择图片api
    wx.chooseImage({
      // 同时选中的图片的数量
      count: 9,
      // 图片的格式 原图 压缩
      sizeType: ['original', 'compressed'],
      // 图片的来源 相册 照相机
      sourceType: ['album', 'camera'],
      // 成功之后回调函数
      success: (result) => {
        this.setData({
          // 图片数组进行拼接
        chooseImgs:[...this.data.chooseImgs,...result.tempFilePaths]
        })
      }
    });  
  }
  
})

pages\feedback\index.wxml

        <view class="fb_content">
            <textarea placeholder="请描述一下您的问题"></textarea>
            <view class="fb_tool">
                <button bindtap="handleChooseImg">+</button> 
                <view class="up_img_item" wx:for="{{chooseImgs}}" wx:key="*this"><UpImg src="{{item}}"></UpImg></view>
            </view>
        </view>

给自定义组件添加属性
components/UpImg/UpImg.js

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

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

  },

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

  }
})

在标签中使用传递的src属性
components\UpImg\UpImg.wxml

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