欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序商品信息购买评分页面样式设计制作开发教程

    2018-07-04 09:14 来源/作者:懒人模板 分类:小程序教程  « »
    本文给大家带来的是微信小程序商品信息购买评分页面样式设计制作开发教程,制作好以后效果图如下:
    一、wxml页面代码如下:
    <view class="detail-container">
      <scroll-view scroll-y="{{true}}" class="section">
        <swiper indicator-dots="{{true}}"
        autoplay="{{true}}" interval="{{4000}}" duration="{{300}}" class="imgView">
          <block wx:for="{{lunboImg}}" >
            <swiper-item class="lunbo">
              <image src="{{item}}" class="slide-image" mode="aspectFill" />
            </swiper-item>
          </block>
        </swiper>
        <view class="productInfo">
          <view class="prodeuctLeft">
            <view class="ProductName">{{ProductName}}</view>
            <view class="price">
              <text class="nowPrice">¥{{newPrice}}</text>
              <text class="oldPrice">市场价:<span>¥{{oldPrice}}</span></text>
            </view>
          </view>
          <view class="share">
              <view>
                <image src="/images/detailImages/share.png"></image>
                <text>分享</text>
              </view>
          </view>
        </view>
        <view class="pingfen">
          <text>客户评分:</text>
          <image src="/images/detailImages/star.png"></image>
          <image src="/images/detailImages/star.png"></image>
          <image src="/images/detailImages/star.png"></image>
          <image src="/images/detailImages/star.png"></image>
        </view>
        <view class="shangpin">
          <text class="tip">商品参数</text>
          <ul>
            <li class="shangpin{{index}}" wx:for="{{goodDetail}}" wx:for-item="item">{{item}}</li>
          </ul>
        </view>
        <view class="shadow"></view>
        <view class="imgBox">
          <image wx:for="{{imgBox}}" src="{{item.ImageUrl}}"></image>
        </view>
      </scroll-view>
      <view class="footer">
        <text class="white"></text>
        <text class="addToCar" bindtap="addToCar">加入购物车</text>
        <text class="nowBuy">立即购买</text>
      </view>
      <modal class="noGood" title="加入购物车成功" confirm-text="确定" cancel-text="去结算" hidden="{{modalHidden}}" bindconfirm="hiddenModal"></modal>
    </view>
    

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议