19.产品详情

页面形态

页面结构

19.1 轮播图

样式

样式代码

wxml

<!-- 产品轮播图-->
<view class="goodsswiper">

    <swiper class="" indicator-dots="false"  autoplay   circular 
     >

            <swiper-item wx:for="{{goods.pics}}" class="" item-id="">
                 <image class="" src="{{item.pics_sma}}" mode="widthFix"  />
            </swiper-item>
    </swiper>
</view>

wxss

.goodsswiper{
    swiper{
        height: 500rpx;
        swiper-item{
            height: 100%;
            text-align: center;
            image{
                width: 60%;
            }
        }
    }
}

19.2产品价格

19.3 产品名称

19.4 产品介绍

19.5 底部菜单