亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

微信小程序選擇圖片和放大預(yù)覽圖片功能這篇文章主要介紹了微信小程序圖片放大預(yù)覽功能的實現(xiàn)方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下：

微信提供了系統(tǒng)的方法來選擇圖片

wx.chooseImage({})

此方法是用來選擇圖片的方法,具體使用如下:

data: {
    avatarUrl:null
},

首先在數(shù)據(jù)中定義接收數(shù)據(jù)的變量，然后調(diào)用方法選擇圖片，將圖片顯示出來。

bindViewTap:function(){
    var that = this;
    wx.chooseImage({
        // 設(shè)置最多可以選擇的圖片張數(shù)，默認9,如果我們設(shè)置了多張,那么接收時//就不在是單個變量了,
        count: 1, 
        sizeType: ['original', 'compressed'], // original 原圖，compressed 壓縮圖，默認二者都有
        sourceType: ['album', 'camera'], // album 從相冊選圖，camera 使用相機，默認二者都有
        success: function(res){
            // 獲取成功,將獲取到的地址賦值給臨時變量
            var tempFilePaths = res.tempFilePaths;
            that.setData({
                //將臨時變量賦值給已經(jīng)在data中定義好的變量
                avatarUrl:tempFilePaths
            })
        },
        fail: function(res) {
            // fail
        },
        complete: function(res) {
            // complete
        }
    })
}

此時我們定義的全局變量,也就是data中的url,已經(jīng)有值了,現(xiàn)在只需要在頁面中顯示即可。

//點擊此按鈕調(diào)用選擇圖片的方法,成功后將圖片顯示在image標簽上
<button bindtap="bindViewTap" type="submit">綁定事件</button>
<image src="{{avatarUrl}}"></image>

如果是多選的話,在顯示的時候,就不應(yīng)該直接顯示數(shù)據(jù)源了,這樣會報錯的,因為返回的是數(shù)組:

<image wx:for="{{avatarUrl}}" wx:key="unique" src="{{item}}"></image>

圖片預(yù)覽：

下面說一下圖片預(yù)覽：

首先在data中定義好數(shù)據(jù)源：

data:{
    avatarUrl:null,
        pictures:['https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',
        'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',
        'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg',
        'https://p1.meituan.net/movie/45f98822bd15082ae3932b6108b17a01265779.jpg',
        'https://p1.meituan.net/movie/722de9a7b0c1f9c262162d87eccaec7c451290.jpg',
        'https://p0.meituan.net/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg',
        'https://p1.meituan.net/movie/a852b992cdec15319c717ba9fa9b7a35406466.jpg',
        'https://p1.meituan.net/movie/dc1f94811793e9c653170cba7b05bf3e484939.jpg'
    ]
},

然后創(chuàng)建方法previewImage,實現(xiàn)圖片預(yù)覽：

previewImage: function(e){
    var that = this,
    //獲取當(dāng)前圖片的下表
    index = e.currentTarget.dataset.index,
    //數(shù)據(jù)源
    pictures = this.data.pictures;
    wx.previewImage({
        //當(dāng)前顯示下表
        current: pictures[index],
        //數(shù)據(jù)源
        urls: pictures
    })
}

然后再頁面中邊遍歷數(shù)據(jù),顯示：

<view>
    <image wx:for="{{pictures}}" wx:key="unique"src="{{item}}" data-index="{{index}}" bindtap="previewImage"></image>
</view>

先列表顯示全部圖片,綁定預(yù)覽方法,點擊圖片進行左右預(yù)覽,

下面在給大家補充下微信小程序圖片放大預(yù)覽功能，具體內(nèi)容介紹如下所示：

需求：當(dāng)點擊圖片時，當(dāng)前圖片放大預(yù)覽，且可以左右滑動

實現(xiàn)方式：使用微信小程序圖片預(yù)覽接口

我們可以看到api需要兩個參數(shù)，分別通過下面的data-list和data-src來傳到j(luò)s中

wxml代碼：

<!--圖片描述-->
<view wx:if="{{item.pictures}}" class="list-dImg">
    <image bindtap="imgYu" data-list="{{item.pictures}}" data-src="{{dImg}}" wx:for="{{item.pictures}}" wx:for-item="dImg" src="{{dImg}}"></image>
</view>

js代碼：

//圖片點擊事件
imgYu:function(event){
    var src = event.currentTarget.dataset.src;//獲取data-src
    var imgList = event.currentTarget.dataset.list;//獲取data-list
    //圖片預(yù)覽
    wx.previewImage({
        current: src, // 當(dāng)前顯示圖片的http鏈接
        urls: imgList // 需要預(yù)覽的圖片http鏈接列表
    })
}

1、給圖片添加一個點擊事件(imgYu)

2、使用event.currentTarget.dataset.自定義屬性名稱 來獲取data-的值 如event.currentTarget.dataset.src (獲取data-src的值)

3、之后將獲取的兩個值 放到wx.previewImage接口 里面即可

效果圖片如下：可以左右滑動上一張下一張

總結(jié)

以上所述是小編給大家介紹的微信小程序選擇圖片和放大預(yù)覽圖片功能，希望對大家有所幫助。