宝哥软件园

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

编辑:宝哥软件园 来源:互联网 时间:2021-12-12

制造者一下自己捣鼓的商品详情页,主要是选择商品类型的交互和样式,点击不同类型切换图片和文字,商品增加减少,还有商品预览图片(本地图片无法预览!)。

源码下载:http://下载。csdn。net/download/d knight l/9939872

1.效果图

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

2.wxml

view class=' swiper _ area ' swiper indicator-dots=' { { indicator dots } } ' indicator-color=' # fff ' autoplay=' { { autoplay } } ' interval=' { { interval } } ' duration=' { { duration } } ' block wx : for=' { { imgUrls } } ' swiper-item data-img=' { { item } '。flower _ image } } ' bind tap=' seeswiper all '图像数据-id销量: { {很好。good _ sell } }/text/view/view/view view bind tap=' view flower area ' class=' choose _ catalog _ area BG _ fff display-flex-row ' view class=' fl '选择花色: { { FlowNameSelect } }/view image class=' arrow _ right fr ' src='././图像/图标-箭头。png//view view class=' commodity _ screen ' bind tap=' hide modal ' wx : if=' { { show modalstatus } } '/view view view animation=' { { animation data } } ' class=' catalog _ area BG _ fff ' { { isHidden==1 ' ' display-block ' : ' display-none ' } ' view class=' catalog _ title ' image class=' thumbnals ' src=' { { flowerImgSelect } } ' mode=' aspectFill '/image view class=' info _ tip ' view class=' good _ dis _ price ' { good price } }/view view view class=' choosed _ catalog _ text-hidden ' { flower name select } }/view/view image class=' cancel ' bind tap=' hideModal ' src=' ././image/delete.png'/image /view滚动视图

更多资讯
游戏推荐
更多+