微信小程序> 小程序类似发布朋友圈的功能(图片上传和修改)

小程序类似发布朋友圈的功能(图片上传和修改)

浏览量:652 时间: 来源:xiuxiumomo

html部分

view class="img-box"    view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"        image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"/image        view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"删除/view    /view    view class="upload-img-btn" bindtap="chooseImg" wx:if="{{imgs.length9}}"上传/view/view.img-box{    width: 100%;    height: 100%;    display: flex;    flex-direction: row;    flex-wrap: wrap}.img{    width: 100px;    height: 100px;       position: relative;}.img image{    width: 100%;    height: 100%;}.delete-btn{    position: absolute;    bottom: 0;    left: 0;    width: 100%;    height: 30px;    font-size: 12px;    color: #fff;    background: rgba(0,0,0,.5);    text-align: center;    line-height: 30px;}.upload-img-btn{    width: 100px;    height: 100px;    text-align: center;    line-height: 100px;    border: 1px solid #ccc;}

js部分

// pages/upImg/upimg.jsPage({    data: {        imgs: []    },    onLoad: function (options) {    },    chooseImg(){        let that = this;        let len = this.data.imgs;        if(len=9){            this.setData({                lenMore: 1            })                       return;        }        wx.chooseImage({            success: (res)={                let tempFilePaths = res.tempFilePaths;                console.log(tempFilePaths)                let imgs = that.data.imgs;                for(let i=0;itempFilePaths.length;i++){                    if(imgs.length9){                        imgs.push(tempFilePaths[i])                    }else{                        that.setData({                            imgs                        })                        wx.showModal({                            title: '提示',                            content: '最多只能有九张图片'                        })                        return;                    }                }                that.setData({                    imgs                })            }        })    },    previewImg(e){        let index = e.currentTarget.dataset.index;        let imgs = this.data.imgs;        wx.previewImage({            current: imgs[index],            urls: imgs,        })    },    deleteImg(e){        let _index = e.currentTarget.dataset.index;        let imgs = this.data.imgs;        imgs.splice(_index,1);        this.setData({            imgs        })    }})

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎