微信小程序 - 选择图片显示操作菜单

原创
2018/06/17 19:18
阅读数 273

之前我分享过选择图片这个文章,但是我在实际开发测试使用中发现一个问题在使用 wx.chooseImage 选择照片显示出第一格是拍照,后面是相册里的图片。这种实现之前说过了,效果如下。

但是你从用户体验角度多想一下来说无疑是下面这种方式比较好,类似微信点击发朋友圈这种形式,效果如下。

做法:可使用小程序API wx.showActionSheet 显示操作菜单 。

我的实现方式直接贴代码:

  chooseimage: function () {
    var that = this;
    wx.showActionSheet({
      itemList: ['从相册中选择', '拍照'],
      itemColor: "#CED63A",
      success: function (res) {
        if (!res.cancel) {
          if (res.tapIndex == 0) {
            that.chooseWxImage('album')
          } else if (res.tapIndex == 1) {
            that.chooseWxImage('camera')
          }
        }
      }
    })
  },

  chooseWxImage: function (type) {
   var that = this;
    wx.chooseImage({
      sizeType: ['original', 'compressed'],
      sourceType: [type], // 可以指定来源是相册还是相机
      success: function (res) {
        console.log(res);
        that.setData({
          tempFilePaths: res.tempFilePaths[0],
        })
      }
    })
  }

实现效果如下:

我相信在产品上为用户多想一点,多做一点,就可能可以更受用户欢迎。做事上比别人多想一点,多坚持一些,也许你就会比他人更幸运一些。

 

水平有限,若有问题请留言交流!

互相学习,共同进步 :) 转载请注明出处谢谢!

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部