微信小程序项目_秋泊优选25

时间:2020-8-28 作者:admin


21、商品详情价格 图文详情的渲染

微信小程序项目_秋泊优选25
1 渲染静态页面
pages\goos_detail\index.wxml

<view class="detail_swiper">
    <swiper 
     autoplay
     circular
     indicator-dots
    >
        <swiper-item
         wx:for="{{goodsObj.pics}}"
         wx:key="pics_id"
        >
         <image mode="widthFix" src="{{item.pics_mid}}"></image>
        </swiper-item>
    </swiper>
</view>

<view class="goods_price">¥{{goodsObj.goods_price}}</view>
<view class="goods_name_row">
    <view class="goods_name">{{goodsObj.goods_name}}</view>
    <view class="goods_collect">
        <text class="iconfont icon-shoucang"></text>
        <view class="collect_text">收藏</view>
    </view>
</view>

<view class="goods_info">
    <view class="goods_info_title">图文详情</view>
    <view class="goods_info_content">

    <!--{{goodsObj.goods_introduce}}-->
     <!--富文本-->
     <rich-text nodes="{{goodsObj.goods_introduce}}"></rich-text>
    </view>
</view>

2 加入样式
在vsc中 pages\goos_detail\index.wxss 编写样式

.detail_swiper{
    swiper{
        height: 65vw;
        text-align: center;
        image{
            width: 60%;
        }
    }
}

.goods_price{
    padding: 15rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: var(--themeColor);
}
.goods_name_row{
    border-top:5rpx solid #dedede;
    border-bottom:5rpx solid #dedede;
    padding: 10rpx 0;
    display: flex;
    .goods_name{
        flex:5;
        color:#000;
        font-size: 30rpx;
        padding: 0 10rpx;

        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:2;
    }
    .goods_collect{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-left: 1rpx solid #000;
        .iconfont{}
        .collect_text{}
    }
}

.goods_info{
    .goods_info_title{
        font-size: 32rpx;
        color: var(--themeColor);
        font-weight: 600;
        padding: 20rpx;
    }
    .goods_info_content{}
}

pages\goos_detail\index.wxss

.detail_swiper swiper {
  height: 65vw;
  text-align: center;
}
.detail_swiper swiper image {
  width: 60%;
}
.goods_price {
  padding: 15rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: var(--themeColor);
}
.goods_name_row {
  border-top: 5rpx solid #dedede;
  border-bottom: 5rpx solid #dedede;
  padding: 10rpx 0;
  display: flex;
}
.goods_name_row .goods_name {
  flex: 5;
  color: #000;
  font-size: 30rpx;
  padding: 0 10rpx;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.goods_name_row .goods_collect {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-left: 1rpx solid #000;
}
.goods_info .goods_info_title {
  font-size: 32rpx;
  color: var(--themeColor);
  font-weight: 600;
  padding: 20rpx;
}

微信小程序项目_秋泊优选25

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。