商品详情属性内容显示

<!-- 商品轮播图开始 -->
<view class="product_swiper">
    <swiper autoplay circular indicator-dots>
        <swiper-item
            wx:for="{{productObj.productSwiperImageList}}"
            wx:key="id"
        >
        <navigator>
            <image mode="widthFix" src="{{baseUrl+'/image/productSwiperImgs/'+item.image}}"></image>
        </navigator>
        </swiper-item>
    </swiper>
</view>
<!-- 商品轮播图结束 -->

<view class="product_price"> ¥ {{productObj.price}}</view>
<view class="product_name">{{productObj.name}}</view>
<view class="product_descripion">{{productObj.description}}</view>

<view class="desc_tabs">  
  <view class="tabs_title">
    <view class="title_item {{activeIndex==0?'active':''}}" data-index="0" bindtap="handleItemTap">商品介绍</view>
    <view class="title_item {{activeIndex==1?'active':''}}" data-index="1"  bindtap="handleItemTap">规格参数</view>
  </view>

  <view class="tabs_content">
    <block wx:if="{{activeIndex==0}}">
      <rich-text nodes="{{productObj.productIntroImgs}}"></rich-text>
    </block>
    <block wx:elif="{{activeIndex==1}}">
      <rich-text nodes="{{productObj.productParaImgs}}"></rich-text>
    </block>
  </view>
</view>

import { requestUtil,getBaseUrl } from "../../utils/requestUtil"

Page({

  /**
   * 页面的初始数据
   */
  data: {
    baseUrl:'',
    productObj:{},
    activeIndex:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const baseUrl=getBaseUrl();
    this.setData({
        baseUrl
    })
    this.getProductDetail(options.id)
  },
  //tab点击事件
  handleItemTap(e){
    const {index}=e.currentTarget.dataset;
    console.log(index)
    this.setData({
        activeIndex:index
    })
  },
  /**
   * 获取商品详情
   * @param {*} id 
   */
  async getProductDetail(id){
    const result = await requestUtil({
        url:'/product/detail',
        data:{id},
        method:"GET"
    });
    this.setData({
        productObj:result.message
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

<!-- 商品轮播图开始 -->
<view class="product_swiper">
    <swiper autoplay circular indicator-dots>
        <swiper-item
            wx:for="{{productObj.productSwiperImageList}}"
            wx:key="id"
        >
        <navigator>
            <image mode="widthFix" src="{{baseUrl+'/image/productSwiperImgs/'+item.image}}"></image>
        </navigator>
        </swiper-item>
    </swiper>
</view>
<!-- 商品轮播图结束 -->

<view class="product_price"> ¥ {{productObj.price}}</view>
<view class="product_name">{{productObj.name}}</view>
<view class="product_descripion">{{productObj.description}}</view>

<view class="desc_tabs">  
  <view class="tabs_title">
    <view class="title_item {{activeIndex==0?'active':''}}" data-index="0" bindtap="handleItemTap">商品介绍</view>
    <view class="title_item {{activeIndex==1?'active':''}}" data-index="1"  bindtap="handleItemTap">规格参数</view>
  </view>

  <view class="tabs_content">
    <block wx:if="{{activeIndex==0}}">
      <rich-text nodes="{{productObj.productIntroImgs}}"></rich-text>
    </block>
    <block wx:elif="{{activeIndex==1}}">
      <rich-text nodes="{{productObj.productParaImgs}}"></rich-text>
    </block>
  </view>
</view>

.product_swiper{
    swiper{
        height: 100vw;
        swiper-item{
            navigator{
                image{}
            }
        }
    }
}
.product_price{
    padding: 15rpx;
    font-size: 42rpx;
    font-weight: 600;
    color: var(--themeColor);
}
.product_name{
    padding: 15rpx;
    font-size: 40rpx;
    font-weight: 600;
    border-top: 1px solid #dedede;
}

.product_descripion{
    padding: 0 10rpx 25rpx 10rpx;
    border-bottom: 1rpx solid #dedede;
}

.desc_tabs{
    .tabs_title{
        display: flex;
        .title_item{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15rpx;
        }
        .active{
            color: var(--themeColor);
        }
    }
    .tabs_content{
        rich-text{
            
        }
    }
}

定义activeIndex，用来判断点击的哪个tab

  /**
   * 页面的初始数据
   */
  data: {
    productObj:{},
    baseUrl:'',
    activeIndex:0
  },

tab点击事件

/**
   * tab点击事件
   * @param {} e 
   */
  handleItemTap(e){
    const {index}=e.currentTarget.dataset;
    console.log(index)
    this.setData({
      activeIndex:index
    })
  },

<view class="tabs_title">
    <view class="title_item {{activeIndex==0?'active':''}}" data-index="0" bindtap="handleItemTap">商品介绍</view>
    <view class="title_item {{activeIndex==1?'active':''}}" data-index="1"  bindtap="handleItemTap">规格参数</view>
  </view>

data: {
    baseUrl:'',
    productObj:{},
    activeIndex:0
  }