35 商品详情放大预览图片

// pages/goods_detail/index.js

/**

* 1 发生请求获取数据

* 2 点击轮播图预览大图

* 1 给轮播图绑定点击事件

* 2 调用小程序的API previewImage

Page({

/**

* 页面的初始数据

data: {

goodsObj:{}

// 商品对象

GoodsInfo:{},

/**

* 生命周期函数--监听页面加载

onLoad: function (options) {

// 获取商品详情数据

async getgoodsdetail(goods_id){

const goodsObj=await request({url:"/goods/detail",data:{goods_id}});

this.GoodsInfo=goodsObj;

this.setData({

goodsObj:{

goods_name:goodsObj.goods_name,

goods_price:goodsObj.goods_price,

// iPhone 部分手机不识别 webp 图片格式

// 最好找到后台，让他进行修改

// 临时自己改确保后台存在 1.webp => 1.jpg

}

})

//点击轮播图放大预览

handlePrevewImage(){

// console.log("预览");

//1 先构造要预览的图片数组

const urls=this.GoodsInfo.pics.map(v=v.pics_mid);

//2 接收传递过来的图片URL

const current=e.currentTarget.dataset.url;

wx-wx.previewImage({

urls,

current

})

// 获取商品详情数据

/**

* 生命周期函数--监听页面显示

onShow: function () {

/**

* 生命周期函数--监听页面隐藏

onHide: function () {

/**

* 生命周期函数--监听页面卸载

onUnload: function () {

/**

* 页面相关事件处理函数--监听用户下拉动作

onPullDownRefresh: function () {

/**

* 页面上拉触底事件的处理函数

onReachBottom: function () {

/**

* 用户点击右上角分享

onShareAppMessage: function () {

}

})

--------------------------

效果实现的代码

<!--

<swiper-item

wx:for="{{goodsObj.pics}}"

wx:key="pics_id"

bindtap="handlePrevewImage"

></swiper>

编译报错，只能注释掉了。虽然一比一复制，前面的没弄好，后面直接就加入，肯定不行的4.3

data-url={{""}}

-->

<view class="goods_price">￥{{goodsObj.goods_price}} </view>

<view class="goods_name">{{goodsObj.goods_name}}</view>

</view>

<rich-text nodes="{{goodsObj.goods.introduce}}"></rich-text>

</view>

35 商品详情放大预览图片相关推荐

微信小程序：收藏、客服、分享、加入购物车、图片放大预览
微信小程序:收藏.客服.分享.加入购物车.图片放大预览微信小程序包含功能 ·轮播 ·图片放大预览 ·收藏 ·客服 ·加入购物车在goods_detail下的index.wxml写页面代码 < ...
Axure RP9——【图片放大预览效果】
图片放大预览效果目录 I.实现效果 II.实现步骤 I.实现效果一般适用于做电商平台图片的放大预览,以此更方便我们看清内容细节. 鼠标停留在商品大图时,会出现一个预览区域,并且右侧会出现预览区域的 ...
微信小程序图片放大预览效果的实现
效果预览效果图有点快,但是可以大致看出来效果了.我再给大家描述下吧一个页面有3张图片,点击其中任意一张都可以放大预览.然后在预览的时候,左右滑动,还可以看另外两张图片. 话不多说,直接上代码 1, ...
element表格图片放大_图片在表格中,鼠标经过图片上方，图片有放大预览效果（vue+element ）...
element的鼠标移到图片时,放大预览效果.实现思路:element的 el-table + el-popover export default { data () { return { tabDa ...
jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...
小程序实现图片的放大预览
1.项目需要,需要实现服务器下发的图片放大预览: 2.我参考别人的,主要是调整参数变量 https://www.jb51.net/article/127427.htm 3.我自己的,是写死的. var ...
移动端查看预览图片放大缩小
方法一之前介绍过一款移动端vue适用的插件大全 https://blog.csdn.net/MtangEr/article/details/85339092 里边有一篇是查看图片放大缩小的 htt ...
Chrome 扩展程序——Imagus：图片放大预览工具
主要介绍 Imagus 的功能及应用,Imagus 是一款简单实用的图片放大预览工具. 主要功能 Imagus 的功能非常单一,就是在浏览网页时,当鼠标悬停到一张图片后,会自动放大图片,进行预览,这在 ...
微信小程序图片放大预览效果的实现，轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...

35 商品详情放大预览图片

35 商品详情放大预览图片相关推荐

最新文章

热门文章

35 商品详情 放大预览图片

35 商品详情 放大预览图片相关推荐

最新文章

热门文章

35 商品详情放大预览图片

35 商品详情放大预览图片相关推荐