uni-app开发小程序,笔记记录6 商品详情页

学习地址
零基础玩转微信小程序：黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含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 商品详情页相关推荐

微信小程序电商项目商品详情页开发实战之数据绑定与事件应用
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
微信小程序商城系列之商品详情页
wxml:  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{au ...
微信小程序制作简单的商品列表页，实现价格求和
微信小程序制作简单的商品列表页,实现价格求和准备工作 1.node.js 2.微信开发者工具目录结构客户端代码实现 index.wxml <view class="contain ...
乐优商城笔记六：商品详情页
使用模板引擎 Thymeleaf + nginx 完成商品详情页静态化完成乐优商城商品详情页搭建商品详情页微服务创建子工程 GroupId:com.leyou.service ArtifactI ...
项目总结：vue.js2.5饿了么APP（5）主要组件实现 - 商品详情页部分
说明:本总结来源于慕课网 @ustbhuangyi老师的课程<Vue.js2.5+cube-ui重构饿了么App>课程,本博客做了项目总结梳理便于回顾,需要学习的伙伴可以移步学习.与君共勉 ...
打车app开发小程序软件定制需要这6个流程
说起打车APP开发的兴起,不得不谈最近的滴滴事件,也让这个昔日打车霸主逐渐没落,令人唏嘘不已.随即而来的是各个打车app之间的无烟战场,希望能抢占滴滴所空出的市场份额.在我们的日常生活中,网约车似乎已 ...
求职兼职招聘类APP开发小程序开发的一些创新功能
企业的发展需要人才,求职者也是需要施展才华的平台,为实现两者之间更好的沟通交流需求,类似智能招聘APP软件这些平台就出现在现在移动互联网时代中.智能招聘APP开发可以更好地促进就业信息需求畅通,为就业 ...
微信小程序商城系列之商品列表页（一）
微信小程序商城列表页 wxml: <view class='list'><block wx:for='{{dataList}}' wx:key='list' wx:for-item= ...
09_心理咨询_微信小程序项目实战_咨询师详情页静态效果实现
一.咨询师信息 1.1 页面结构在app.json里面的pages里面定义"pages/consultDetails/consultDetails" 1.定义一个view,给其添 ...

uni-app开发小程序,笔记记录6 商品详情页

uni-app开发小程序,笔记记录6 商品详情页相关推荐

最新文章

热门文章