E企盈小程序营销工具技术服务商 热线:4006-838-530

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

E企盈小程序直播系统

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        })    }})

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序类似发布朋友圈的功能(图片上传和修改)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏