加减组件，直接新建一个项目后去里面复制出来使用，可能需要重启编辑器，进行安装必要的依赖包
里面的一个uni-number-box组件，复制出来后直接引用，就是加减组件
注意引入uniapp的组件后，注意修改这里，防止在使用的时候，页面出现滚动
detials完整代码：
<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="detial-goods">
<view class="goods-pprice">￥399.00</view>
<view class="goods-oprice">￥599.33</view>
<view class="goods-name">正在热刷新，如刷新失败，请点击控制台工具栏上的【重启应用图标】</view>
</view>
<!-- 商品详情 -->
<view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
<view>
<image class="detial-imgs" src="../../static/img/hot.png" mode=""></image>
</view>
</view>
<!-- 商品列表 -->
<Card name="看了又看"></Card>
<CommodityList :commodityList='dataList'></CommodityList>
<!-- 底部 -->
<view class="detial-footer">
<view class="iconfont icon-xiaoxi"></view>
<view class="iconfont icon-gouwuche"></view>
<view class="add-shopcard" @tap="showPop">加入购物车</view>
<view class="purchase" @tap="showPop">立即购买</view>
</view>
<!-- 底部弹出层 -->
<view class="pop" v-if="isShow" @touchmove.stop.prevent="">
<!-- 蒙层 -->
<view class="pop-mask" @tap="hidePop">
<!-- 内容块 -->
<view class="pop-box" :animation="animationData">
<view class="">
<image class="pop-img" src="../../static/img/hot.png" mode=""></image>
</view>
<view class="pop-num">
<view class="">购买数量</view>
<UniNumberBox min="1"></UniNumberBox>
</view>
<view class="pop-sub">确定</view>
</view>
</view>
</view>
</view>
</template>
<script>
import Card from '@/components/common/card.vue'
import CommodityList from '@/components/common/commodityList.vue'
import UniNumberBox from '@/components/unix/uni-number-box/uni-number-box.vue'
export default {
data() {
return {
swiperList: [{
imgUrl: '../../static/img/recommended-3.png'
}, {
imgUrl: '../../static/img/recommended-3.png'
}, {
imgUrl: '../../static/img/recommended-3.png'
}],
isShow: false,
animationData: {},
dataList: [{
id: 1,
img: '../../static/img/commondity.png',
name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
pprice: '299',
oprice: '699',
discount: '5.5'
},
{
id: 2,
img: '../../static/img/commondity.png',
name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
pprice: '269',
oprice: '699',
discount: '5.5'
},
{
id: 3,
img: '../../static/img/commondity.png',
name: '爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试爆款商品测试',
pprice: '289',
oprice: '688',
discount: '5.5'
}
]
}
},
components: {
Card,
CommodityList,
UniNumberBox
},
methods: {
showPop() {
// 现实蒙层动画
var animation = uni.createAnimation({
duration: 200,
});
animation.translateY(600).step();
this.animationData = animation.export();
this.isShow = true;
setTimeout(() => {
animation.translateY(0).step();
this.animationData = animation.export();
}, 200)
},
hidePop() {
// 隐藏蒙层动画
var animation = uni.createAnimation({
duration: 200,
});
animation.translateY(600).step();
this.animationData = animation.export();
this.isShow = false;
setTimeout(() => {
animation.translateY(0).step();
this.isShow = false;
}, 200)
}
},
}
</script>
<style>
.details {
padding-bottom: 90rpx;
}
swiper {
width: 100%;
height: 700rpx;
}
.swiper-img {
width: 100%;
height: 700rpx;
}
.detial-goods {
text-align: center;
font-size: 36rpx;
font-weight: bold;
padding: 10rpx 0;
}
.detial-imgs {
width: 100%;
}
.detial-footer {
display: flex;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 90rpx;
background-color: #FFFFFF;
justify-content: center;
align-items: center;
}
.detial-footer .iconfont {
display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
height: 60rpx;
border-radius: 100%;
background-color: #333333;
text-align: center;
color: #FFFFFF;
margin: 0 10rpx;
}
.add-shopcard {
margin: 0 40rpx;
padding: 6rpx 30rpx;
background-color: #000000;
color: #FFFFFF;
border-radius: 40rpx;
}
.purchase {
margin: 0 40rpx;
margin: 0 40rpx;
padding: 6rpx 30rpx;
background-color: #49BDFB;
color: #FFFFFF;
border-radius: 40rpx;
}
.pop {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
.pop-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
.pop-box {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 450rpx;
background-color: #FFFFFF;
}
.pop-img{
width: 260rpx;
height: 260rpx;
}
.pop-sub{
line-height: 80rpx;
color: #FFFFFF;
text-align: center;
background-color:#49BDFB;
}
.pop-num{
display: flex;
justify-content: space-between;
padding: 20rpx 20rpx;
}
</style>
