备案域名大量出售QQ582001116微信小程序商品详情页交互源码（选择商品类型切换、预览商品图片） ...

258资源分享 > 建站学院 > 微信开发 > 微信小程序商品详情页交互源码（选择商品类型切换、预览商品图片） ...

购买VIP 金币充值

分类

织梦教程帝国教程 discuz教程微信开发 MYSQL教程 MSSQL教程网站运营 ecshop教程前端教程 Phpweb教程 php编程服务器架设 ASP编程脚本编程

微信小程序商品详情页交互源码（选择商品类型切换、预览商品图片） ...

发布时间:2020-11-14

maker一下自己捣鼓的商品详情页，主要是选择商品类型的交互和样式，点击不同类型切换图片和文字，商品增加减少，还有商品预览图片（本地图片无法预览！！！）。。

源码下载：

1.效果图

2.wxml <view class="swiper_area"> <swiper indicator-dots="{{indicatorDots}}" indicator-color="#fff" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item data-img=http://www.yiyongtong.com/archives/"{{item.flower_image}}" bindtap="seeSwiperAll"> <image data-id="{{item.flower_id}}" src=http://www.yiyongtong.com/archives/"{{item.flower_image}}" class="slide-image" /> </swiper-item> </block> </swiper> </view> <view class="goods_infor_top"> <view class="goods_title">{{good.good_name}} </view> <view class="good_description"> <text class="description_content">{{good.good_mark}}</text> </view> <view class="good_info_bottom display-flex-row" style=""> <view class="good_price"> <text class="color_ff6700 good_dis_price pdr10rpx display-ib">¥{{goodPrice}}/{{good.good_unit}}</text> <block wx:if="{{good.good_column=='100903'}}"> <text class="good_orin_price td-lt display-ib"> ¥{{goodOrinPrice}} </text> </block> </view> <view class="sale"> <text class="good_sale_count display-ib" style="">销量:{{good.good_sell}}</text> </view> </view> </view> <view bindtap="viewFlowerArea" class="choose_catalog_area bg_fff display-flex-row"> <view class="fl">选择花色: {{flowerNameSelect}} </view> <image class="arrow_right fr" src=http://www.yiyongtong.com/archives/"../../image/icon-arrow.png"/> </view> <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" class="catalog_area bg_fff {{isHidden == 1 ? 'display-block':'display-none'}}"> <view class="catalog_title"> <image class="thumbnails" src=http://www.yiyongtong.com/archives/"{{flowerImgSelect}}" mode="aspectFill"></image> <view class="info_tip"> <view class="good_dis_price">¥{{goodPrice}}</view> <view class="choosed_catalog text-hidden">{{flowerNameSelect}}</view> </view> <image class="cancel" bindtap="hideModal" src=http://www.yiyongtong.com/archives/"../../image/delete.png"></image> </view> <scroll-view

本文标签

:备案管家服务帮您把复杂流程变简单，解决您在进行网站备案过程中遇到的效率低下和成功率不高的问题。个人300/2个域名，企业500/5个域名，qq1650004.

程序微信图片类型切换源码商品详情交互选择预览

上一篇：Charlotte微信小程序开发（一）--数据存储
下一篇：实战案例-- 用Java编写基础小程序

258资源分享网

分类

推荐文章

推荐下载

微信小程序商品详情页交互源码（选择商品类型切换、预览商品图片） ...

本文标签