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

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

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滚动视图