學習地址
零基礎玩轉微信小程序：黑馬程序員前端微信小程序開發教程，微信小程序從基礎到發布全流程_企業級商城實戰(含uni-app項目多端部署)
uniapp - 黑馬優購 筆記地址

知識點
1 數據加載后 在顯示頁面

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

數據加載后 ,會給goods_info賦值 ,會刷新頁面

2 商品輪播圖

3 微信 圖片展示
@click=“preview(index)”

4 html 展示

5 底部 uni-goods-nav 商品導航

數據初始化

商品導航 按鈕點擊事件

界面固定底部

// 上面的 布局距離底部50px 防止被商品導航擋住.topLayout{padding-bottom: 50px;}

源碼

<template><view><view class="layout" v-if="goods_info.goods_name"><view class="topLayout"><view class="topBannerLayout"><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true"><swiper-item v-for="(item , index) in goods_info.pics" :key="index"><image :src="item.pics_big" @click="preview(index)"></image></swiper-item></swiper></view><view class="centerInfoLayout"><!-- 商品信息區域 --><view class="goods-info-box"><!-- 商品價格 --><view class="price">￥{{goods_info.goods_price}}</view><!-- 信息主體區域 --><view class="goods-info-body"><!-- 商品名稱 --><view class="goods-name">{{goods_info.goods_name}}</view><!-- 收藏 --><view class="favi"><uni-icons type="star" size="18" color="gray"></uni-icons><text>收藏</text></view></view><!-- 運費 --><view class="yf">快遞：免運費</view></view></view><view class="bottomTuwenLayout"><rich-text :nodes="goods_info.goods_introduce"></rich-text></view></view><view class="goods_nav"><uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"@buttonClick="buttonClick" /></view></view></view> </template><script>export default {data() {return {goods_info: {},options: [{icon: 'chat',text: '客服'}, {icon: 'cart',text: '購物車',info: 2}],buttonGroup: [{text: '加入購物車',backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',color: '#fff'},{text: '立即購買',backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',color: '#fff'}],};},onLoad(options) {const goods_id = options.goods_idthis.getGoodsDetail(goods_id)},methods: {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()// 為 data 中的數據賦值res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')this.goods_info = res.messageconsole.log(this.goods_info)},preview(index){uni.previewImage({// 預覽時，默認顯示圖片的索引current: index,// 所有圖片 url 地址的數組urls: this.goods_info.pics.map(x => x.pics_big)})},onClick(e){console.log(e)if (e.content.text === '購物車') {// 切換到購物車頁面uni.switchTab({url: '/pages/cart/cart'})}},buttonClick(e){console.log(e)if (e.content.text === '加入購物車') {// 切換到購物車頁面}}}} </script><style lang="scss">.topBannerLayout {width: 750rpx;height: 750rpx;swiper {width: 100%;height: 100%;image {width: 100%;height: 100%;}}}// 商品信息區域的樣式.goods-info-box {padding: 10px;padding-right: 0;.price {color: #c00000;font-size: 18px;margin: 10px 0;}.goods-info-body {display: flex;justify-content: space-between;.goods-name {font-size: 13px;padding-right: 10px;}// 收藏區域.favi {width: 120px;font-size: 12px;display: flex;flex-direction: column;justify-content: center;align-items: center;border-left: 1px solid #efefef;color: gray;}}// 運費.yf {margin: 10px 0;font-size: 12px;color: gray;}}.topLayout{padding-bottom: 50px;}.layout{}.goods_nav {position: fixed;bottom: 0;left: 0;width: 100%;} </style>

總結

以上是生活随笔為你收集整理的uni-app开发小程序,笔记记录6 商品详情页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。