使用场景

举个栗子：外卖app当订单商品数量比较多时，不方便一次性展示出来。通常会展示一部分，并在页面给出一个查看更多功能。点击后即可自定义展示剩余内容，比如可以每次点击多展示N个内容，或展示所有。

实现效果

实现步骤

以下为整个页面的所有代码，涉及到的数据可以自己造一些，此处不再赘述。

vue页面

<template>
	<view class="box">
		<h3>订单信息</h3>

		<!-- 商品列表-->
		<view class="productlist">
				<block v-for="(item,index) in cartList" :key="index">
					<view class="product" v-show="index < max">
						<!-- 左边商品图片 -->
						<view class="image">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="info">
							<text>{{item.name}}</text>
							<text>x{{item.count}}</text>
						</view>
						<view class="price">
							实付￥<text class="red-text">{{item.totalPrice}}</text>
						</view>
					</view>
				</block>
				<view style="text-align: center;color: #737373;" v-show="total > max" @tap="more">查看更多</view>
		</view>
		
		<view class="summary">
			<uni-list :border="true">
				<view class="right-fixed">
					合计：￥<text class="red-text">{{totalPrice}}</text>
				</view>
				<view class="receive">
					<view>
						<text>收货地址</text>
						<text class="right-fixed">{{checkedAddress.address}}</text>
					</view>
					<view>
						<text>收货人信息</text>
						<text class="right-fixed">{{checkedAddress.receiver}} {{checkedAddress.contact}}</text>
					</view>
					<view>
						<text>备注</text>
						<!-- <text class="right-fixed">少放辣！</text> -->
						<input type="text" name="remark" v-model="remark">
					</view>
				</view>
			</uni-list>
		</view>
		
		
		<button @click="pay" type="primary">立即支付</button>
	</view>
</template>

JS

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	import {guid} from '../../util/util.js'

	export default {
		data(){
			return{
				max: 3, //默认展示几条数据
				remark: ''
			}
		},
		components: {

		},
		computed: {
			...mapState(['cartList']),
			...mapState({
				checkedAddress: state => state.checkedAddr,
				orderShopInfo: state => state.orderShopInfo
			}),
			// 计算所有商品总数量
			totalCount() {
				return this.cartList.reduce((total, item) => {
					return total + item.count
				}, 0)
			},
			// 所有商品累积的总价
			totalPrice() {
				let amount = this.cartList.reduce((total, item) => {
					return total + item.totalPrice
				}, 0)
				// 加上配送费				
				return (Math.round((amount+this.orderShopInfo.physical) * 10) / 10).toFixed(1)
			},
			// 商品个数
			total(){
				return this.cartList.length
			}
			
		},
		methods: {
			more() {
				console.log(this.max)
				this.max = this.total; //每次点击加1条
			},
			pay() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定支付订单？',
					success: function (res) {
						if (res.confirm) {
							// 遍历购物车中商品信息
							let items = [];
							that.cartList.forEach((item)=>{
								let e = {
									product_id: item.gid,
									product_name: item.name,
									image: item.image,
									qty: item.count,
									amount: item.totalPrice
								}
								
								items.push(e)
							})
							
							//console.log(JSON.stringify(items))
							
							let mydate = new Date();
							// 构建订单实体
							let order = {
								userid: that.$store.state.loginUser._id,
								order_no: 'sa'+guid(),
								shop_id: that.orderShopInfo._id,
								shop_name: that.orderShopInfo.shop,
								shop_image: that.orderShopInfo.logo,
								total_qty: that.totalCount,
								total_amount: that.totalPrice,
								deliver_fee: that.orderShopInfo.physical,
								address: that.checkedAddress.address,
								receiver: that.checkedAddress.receiver,
								contact: that.checkedAddress.contact,
								remark: that.remark,
								order_time: mydate.toLocaleDateString()+' '+mydate.toLocaleTimeString(),
								items: items
							}
							
							console.log(order);
							
							// 提交订单
							that.$post('/addOrder', JSON.stringify(order)).then(res => {
								// 清空购物车
								that.$store.commit('clearCart')
								uni.showToast({
									title:'添加成功！',
									duration:1000
								})
								setTimeout(function () {
									uni.switchTab({
										url:'/pages/order/order'
									})
								}, 1000);
								
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

CSS

<style lang="scss" scoped>
	$base-color: red;
	.red-text{
		color: $base-color;
	}
	.box {
		padding: 10px;
		color: #898989;
	}

	.productlist {
		justify-content: space-between;
		margin: 30upx 0;
		color: #898989;

		.product {
			height: 110px;
			display: flex;
		}

		.product .image {
			width: 100px !important;
			height: 100px !important;
			overflow: hidden;
		}

		.product .image image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
			overflow: hidden;
		}

		.product .info {
			width: 300upx;
			line-height: 100px;
			padding-left: 10px;
		}

		.product .price {
			position: fixed;
			right: 20px;
			line-height: 100px;
		}
	}
	
	.summary{
		view{
			padding: 5px;
		}
		.receive{
			margin-top: 30px;
		}
	}
	
	// 右对齐
	.right-fixed{
		position: fixed;
		right: 20px;
	}
</style>