小程序模板網(wǎng)

微信小程序商品詳情頁交互源碼(選擇商品類型切換、預(yù)覽商品圖片) ...

發(fā)布時(shí)間:2018-04-23 12:15 所屬欄目:小程序開發(fā)教程

maker一下自己搗鼓的商品詳情頁,主要是選擇商品類型的交互和樣式,點(diǎn)擊不同類型切換圖片和文字,商品增加減少,還有商品預(yù)覽圖片(本地圖片無法預(yù)覽?。。。?。。

源碼下載:http://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  


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23937.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢