maker一下自己捣鼓的商品详情页,主要是选择商品类型的交互和样式,点击不同类型切换图片和文字,商品增加减少,还有商品预览图片(本地图片无法预览!!!)。。 源码下载:https://download.csdn.net/download/dknightl/9939872 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="{{item.flower_image}}" bindtap="seeSwiperAll"> <image data-id="{{item.flower_id}}" src="{{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="../../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="{{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="../../image/delete.png"></image> </view> <scroll-view |
微信小程序商品详情页交互源码(选择商品类型切换、预览商品图片) ...
发布:2018-04-23 12:15浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08