商品详情页滚动透明渐变导航栏
商品详情页内容块布局
商品详情页固定底部布局
商品详情页布局
头部,内容部分,底部
details.vue
<template>
<view class="details">
<!-- 商品图 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item
v-for="(item,index) in swiperList"
:key="index"
>
<view class="swiper-item">
<image class="swiper-img" :src="item.imgUrl" mode=""></image>
</view>
</swiper-item>
</swiper>
<!-- 价格和名称 -->
<view class="details-goods">
<view class="goods-pprice">¥399.00 </view>
<view class="goods-oprice">¥599.00 </view>
<view class="goods-name">大衣绒毛大款貂皮球毛 </view>
</view>
<!-- 商品详情图 -->
<view class="">
<view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
<view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
<view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
<view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
<view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
<view class=""><image class="details-img" src="../../static/img/b3.jpg" mode=""></image></view>
</view>
<!-- 商品列表 -->
<Card cardTitle="看了又看"></Card>
<CommodityList :dataList="dataList"></CommodityList>
<!-- 底部 -->
<view class="details-foot">
<view class="iconfont icon-xiaoxi"></view>
<view class="iconfont icon-31gouwuche"></view>
<view class="add-shopcart">加入购物车</view>
<view class="purchase">立刻购买</view>
</view>
</view>
</template>
<script>
import Card from '@/components/common/Card.vue';
import CommodityList from '@/components/common/CommodityList.vue';
export default {
data() {
return {
swiperList:[
{imgUrl:"../../static/img/b3.jpg"},
{imgUrl:"../../static/img/b3.jpg"},
{imgUrl:"../../static/img/b3.jpg"}
],
dataList:[{
id:1,
imgUrl:"../../static/logo.png",
name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
pprice:"299",
oprice:"659",
discount:"5.2"
},
{
id:2,
imgUrl:"../../static/logo.png",
name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
pprice:"299",
oprice:"659",
discount:"5.2"
},{
id:3,
imgUrl:"../../static/logo.png",
name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",
pprice:"299",
oprice:"659",
discount:"5.2"
}]
};
},
components:{
Card,
CommodityList
}
}
</script>
<style lang="scss">
swiper{
width: 100%;
height: 700rpx;
}
.swiper-img{
width: 100%;
height: 700rpx;
}
.details{
padding-bottom: 90rpx;
}
.details-goods{
text-align: center;
font-weight: bold;
font-size: 36rpx;
padding: 10rpx 0;
}
.details-img{
width: 100%;
}
.details-foot{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
}
.details-foot .iconfont{
width: 60rpx;
height: 60rpx;
border-radius: 100%;
background-color: #000000;
color: #FFFFFF;
text-align: center;
margin: 0 10rpx;
line-height: 60rpx;
}
.add-shopcart{
margin: 0 40rpx;
padding: 6rpx 30rpx;
background-color: #000000;
color: #FFFFFF;
border-radius: 40rpx;
}
.purchase{
margin: 0 40rpx;
padding: 6rpx 30rpx;
background-color: #49BDFB;
color: #FFFFFF;
border-radius: 40rpx;
}
</style>
Commodity组件优化
增加点击商品图片跳转到详情
代码如下 Commodity
<template>
<view class="commodity"
:style="'flex-wrap:'+wrap+';'"
>
<!-- 单个商品组件 -->
<view class="commodity-item"
v-for="(item,index) in dataList"
:key="index"
:style="'width:'+itemW+';'"
@tap="goDetails"
>
<image
class="commodity-img"
:src="item.imgUrl"
:style="'height:'+bigH+';'"
mode=""
></image>
<view class="commodity-content">
<text class="commodity-name" :style="'font-size:'+nameSize+';'">{{item.name}}</text>
<view class="">
<text class="pprice">${{item.pprice}}</text>
<text class="oprice">${{item.oprice}}</text>
</view>
<text class="discount">{{item.discount}}折</text>
</view>
</view>
</view>
</template>
<script>
/* 接受数据 dataList*/
export default {
props:{
//数据
dataList:Array,
// 宽度
itemW:{
type:String,
default:"375rpx" /* 通过传参数来改变组件默认样式*/
},
//高度
bigH:{
type:String,
default:"375rpx" /* 通过传参数来改变组件默认样式*/
},
// 是否换行
wrap:{
type:String,
default:"wrap" /* 通过传参数来改变组件默认样式*/
},
//商品文字大小
nameSize:{
type:String,
default:"26rpx"
}
},
methods:{
goDetails(){
uni.navigateTo({
url:'/pages/details/details'
})
}
}
}
</script>
<style lang="scss">
.commodity{
display: flex;
}
.commodity-item{
padding-bottom: 20rpx;
}
.commodity-img{
width: 100%;
}
.commodity-content{
text-align: center;
}
.commodity-name{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
color: #333;
word-break: break-all;
padding: 6rpx 20rpx;
}
.oprice{
text-decoration: line-through;
font-size: 24rpx;
color: #999;
}
.discount{
border-radius: 4rpx;
border: 1px solid #FF3333;
padding: 2rpx 10rpx;
font-size: 20rpx;
color: #FF3333;
}
</style>
设置page.json实现透明渐变导航栏
代码如下 page.json部分代码
{
"path" : "pages/details/details",
"style" :
{
"navigationBarTitleText": "商品详情",
"app-plus": {
"scrollIndicator": "none",
"titleNView": {
"type": "transparent",
"buttons": [
{
"type": "menu"
},
{
"type": "share"
}
]
}
}
}
}
实例图片
前端目录结构
-
manifest.json 配置文件: appid、logo…
-
pages.json 配置文件: 导航、 tabbar、 路由
-
main.js vue初始化入口文件
-
App.vue 全局配置:样式、全局监视
-
static 静态资源:图片、字体图标
-
page 页面
- index
- index.vue
- list
- list.vue
- my
- my.vue
- search
- search.vue
- search-list
- search-list.vue
- shopcart
- shopcart.vue
- details
- details.vue
- index
-
components 组件
- index
- Banner.vue
- Hot.vue
- Icons.vue
- indexSwiper.vue
- Recommend.vue
- Shop.vue
- common
- Card.vue
- Commondity.vue
- CommondityList.vue
- Line.vue
- ShopList.vue
- index
-
common 公共文件:全局css文件 || 全局js文件
- api
- request.js
- common.css
- uni.css
- api