微信小程序轮播图单独添加图片、修改轮播图图片、单独修改某张图片

小老弟上课的基本见解,有错误欢迎大牛们指正


pages/swiper/swiper.wxml













 


         
  
 
 

 



Page({

    /**
     * 页面的初始数据
     */
    data: {
        image: ["/images/0.jpg", "/images/1.jpg", "/images/2.jpeg"],
 
        imgArr:["/images/0.jpg", "/images/1.jpg", "/images/2.jpeg"],
        pdd:0,
    },
    getImg() {
        var _this = this;
        wx.chooseImage({
            count: 3, //选择1张,最多选择9张
            sizeType: ['original', 'compressed'], //是否原图
            sourceType: ['album', 'camera'], //是否用相机还是相册

            success(res) {
                // tempFilePath可以作为img标签的src属性显示图片
                const tempFilePaths = res.tempFilePaths
                _this.setData({
                    image: res.tempFilePaths,
                })
            }
        })
    },
getc() {
        var acc=this;
        wx.chooseImage({
            count: 1, //选择1张,最多选择9张
            sizeType: ['original', 'compressed'], //是否原图
            sourceType: ['album', 'camera'], //是否用相机还是相册
            success(res) {
                // tempFilePath可以作为img标签的src属性显示图片
                const tempFilePaths = res.tempFilePaths
                console.log(tempFilePaths);
                acc.data.image.push([tempFilePaths.toString()])
                // 在数组image后面增加图片
                console.log(acc.data.image);
                acc.setData({
                    image:acc.data.image 
                })
            }
        })
    },
    getima(e){
        var _this=this;
        //1.拿到我点击的图片下标
         console.log(e);
        // //2.把下标赋值给ac
        var ac=parseInt(e.currentTarget.dataset.cc);
        // console.log(ac);
        // console.log(this.data.pdd);

        wx.chooseImage({
           count: 3, //选择1张,最多选择9张
             sizeType: ['original', 'compressed'], //是否原图
             sourceType: ['album', 'camera'], //是否用相机还是相册

            success(res) {
                // tempFilePath可以作为img标签的src属性显示图片
                const tempFilePaths = res.tempFilePaths
                
                // 3.将选择的图片的路径,赋值给imgArr
                 _this.data.imgArr[ac]=res.tempFilePaths[0]
                // _this.data.imgArr[_this.data.pdd]=res.tempFilePaths[0]
                
                _this.setData({
                    //4.将存在_this.data.imgArr的路径,赋值到imgArr
                     imgArr: _this.data.imgArr,
                   
                })
            }
        })
    },

    pdd(e){
        // console.log(e.detail.current);
        this.setData({
            pdd:e.detail.current
        })

    }

})

这里pdd(e)使用的是第二种方法(不需要可以删除),将所要修改的图片信息赋值给data:{}定义的pdd,此时_this.data.imgArr[_this.data.pdd]=res.tempFilePaths[0]这行里的_this.data.pdd为轮播图里的第几个图片,将要替换的图片的数据,替换近imArr[]里的第几个(_this.data.pdd)图片,最后_this.setData进行替换

微信小程序轮播图单独添加图片、修改轮播图图片、单独修改某张图片_第1张图片

通过console.log输出的数据,看到将下标写入了本地数据,并且命名为cc

你可能感兴趣的:(微信小程序,小程序)