微信小程序(黑马优购:商品详情)

君泺

于 2024-03-28 00:36:34 发布

阅读量228

点赞数 2

分类专栏：黑马优购文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/jklzbc/article/details/137093604

版权

黑马优购专栏收录该内容

8 篇文章

订阅专栏

本文介绍了在使用uni-app开发过程中，如何实现轮播图预览、图文标签的渲染优化（包括去除图片空白间隙和处理.webp格式），解决商品价格闪烁问题，以及底部商品导航组件的使用，以及点击事件中加入购物车功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.轮播图大图预览

<swiper-item v-for="(item,i) in goods_info.pics" :key="i">
          <image :src="item.pics_big" @click="preview(i)"></image>
      </swiper-item>

   preview(i){
         uni.previewImage({
                 current: i,
                 urls: this.goods_info.pics.map(x => x.pics_big)
          })
      }

2.渲染图文标签(HTML)

<rich-text :nodes="goods_info.goods_introduce"></rich-text>

1)去除图片底部空白间隙

 async getGoodsDetail(goods_id){
        const { data: res} = await uni.$http.get('/api/public/v1/goods/detail',{goods_id})
        if(res.meta.status !== 200 ){
          return uni.$showMsg()
        }
        //去除图片底部空白间隙
       res.message.goods_introduce  = res.message.goods_introduce.replace(/<img /g,'<img style="display:block;"  ')
        
        this.goods_info = res.message
      },

2)解决.webp格式图片在手机上无法显示的问题replace(/webp/g,'jpg')

//去除图片底部空白间隙replace(/<img /g,'<img style="display:block;"  ')
        //解决.webp格式图片在手机上无法显示的问题replace(/webp/g,'jpg')
       res.message.goods_introduce  = 
       res.message.goods_introduce.replace(/<img /g,'<img style="display:block;"  ').replace(/webp/g,'jpg')

3.解决商品价格闪烁问题

在最外层View添加v-if条件

 <view v-if="goods_info.goods_name">

4.底部渲染

    
    <!-- 商品导航组件区域 -->
    <view class="goods_nav">
      <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
    </view>

  return {
        goods_info: {},
          options: [{
            icon: 'shop',
            text: '店铺',
            infoBackgroundColor: '#007aff',
            infoColor: "red"
          }, {
            icon: 'cart',
            text: '购物车',
            info: 0
          }],
          buttonGroup: [{
              text: '加入购物车',
              backgroundColor: '#ff0000',
              color: '#fff'
            },
            {
              text: '立即购买',
              backgroundColor: '#ffa200',
              color: '#fff'
            }
          ]

5.点击加入购物按钮跳转到购物车页面

onClick(e){
        if(e.content.text === '购物车'){
          uni.switchTab({
            url:'/pages/cart/cart'
          })
        }
      }