舟山闪爸电子技术有限公司

產(chǎn)品中心
更多服務

小程序?qū)崿F(xiàn)點擊圖片放大預覽功能

—— 2018 ——
03/19
00:00

來源：

作者：未知

閱讀：0

欄目：小程序開發(fā)

2018/3/19 0:00:00 來源：不詳 作者：未知

　　小程序?qū)崿F(xiàn)點擊圖片放大預覽功能

　　我們可以看到很多小程序，點擊圖片可以實現(xiàn)放大預覽，并且可以左右滑動圖片，這種情況是如何實現(xiàn)的，主要實現(xiàn)方式是什么呢?

　　小程序點擊圖片放大實現(xiàn)方式：使用微信小程序圖片預覽接口

小程序?qū)崿F(xiàn)點擊圖片放大預覽功能

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

　　wxml代碼：

　小程序?qū)崿F(xiàn)點擊圖片放大預覽功能

　　js代碼：

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

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

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

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

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

小程序?qū)崿F(xiàn)點擊圖片放大預覽功能

小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。

更多小程序開發(fā)案例，盡在：http://www.fluoresville.cn/miniprogramschool/kaifa.html
 

小程序顯示圖片相關文章：

小程序加載圖片如何實現(xiàn)

小程序開發(fā)上傳圖片如何實現(xiàn)

小程序上傳圖片組件及上傳多張圖片


【本站聲明】
  1、本站文章中所選用的圖片及文字來源于網(wǎng)絡以及用戶投稿，由于未聯(lián)系到知識產(chǎn)權人或未發(fā)現(xiàn)有關知識產(chǎn)權的登記，如有知識產(chǎn)權人并不愿意我們使用，如果有侵權請立即聯(lián)系。
  2、本網(wǎng)站不對文章中所涉及的內(nèi)容真實性、準確性、可靠性負責，僅系客觀性描述，如您需要了解該類商品/服務詳細的資訊，請您直接與該類商品/服務的提供者聯(lián)系。


KESION 科汛軟件

KESION 科汛軟件是國內(nèi)領先的在線教育軟件及私域社交電商軟件服務提供商，長期專注于為企業(yè)提供在線教育軟件及社交電商SaaS平臺解決方案。
公司核心產(chǎn)品云開店SaaS社交電商服務平臺、在線教育SaaS服務平臺、教育企業(yè)數(shù)字化SaaS云平臺、企微營銷助手、私有化獨立部署品牌網(wǎng)校和在線教育咨詢等。

KESION 不斷通過技術創(chuàng)新，提供產(chǎn)品和服務，助力企業(yè)向數(shù)字化轉(zhuǎn)型，通過科技驅(qū)動商業(yè)革新，讓商業(yè)變得更智慧！



▼點擊進入科汛官網(wǎng)了解更多



熱門標簽
微信小程序 SaaS
上/下篇
換一換相關推薦
精選內(nèi)容
熱點精選