使用场景

举个栗子：外卖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 = thisuni.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>