Uniapp implementation Click to load more

Use scenarios

Take a chestnut ： Take-out food app When the order quantity is large , It's not convenient to show it at one time . It usually shows a part , And give a To view more function . Click to customize the display of the remaining content , For example, you can display more per click N A content , Or show all .

Realization effect

Implementation steps

The following is all the code of the whole page , The data involved can be made by yourself , No more details here .

vue page

<template>
	<view class="box">
		<h3> Order information </h3>

		<!--  List of goods -->
		<view class="productlist">
				<block v-for="(item,index) in cartList" :key="index">
					<view class="product" v-show="index < max">
						<!--  Product picture on the left  -->
						<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">
							 Paid in ￥<text class="red-text">{
   {item.totalPrice}}</text>
						</view>
					</view>
				</block>
				<view style="text-align: center;color: #737373;" v-show="total > max" @tap="more"> To view more </view>
		</view>
		
		<view class="summary">
			<uni-list :border="true">
				<view class="right-fixed">
					 total ：￥<text class="red-text">{
   {totalPrice}}</text>
				</view>
				<view class="receive">
					<view>
						<text> Shipping address </text>
						<text class="right-fixed">{
   {checkedAddress.address}}</text>
					</view>
					<view>
						<text> Consignee information </text>
						<text class="right-fixed">{
   {checkedAddress.receiver}} {
   {checkedAddress.contact}}</text>
					</view>
					<view>
						<text> remarks </text>
						<!-- <text class="right-fixed"> Less spicy ！</text> -->
						<input type="text" name="remark" v-model="remark">
					</view>
				</view>
			</uni-list>
		</view>
		
		
		<button @click="pay" type="primary"> Pay now </button>
	</view>
</template>

JS

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

	export default {
    
		data(){
    
			return{
    
				max: 3, // Several pieces of data are displayed by default 
				remark: ''
			}
		},
		components: {
    

		},
		computed: {
    
			...mapState(['cartList']),
			...mapState({
    
				checkedAddress: state => state.checkedAddr,
				orderShopInfo: state => state.orderShopInfo
			}),
			//  Calculate the total quantity of all goods 
			totalCount() {
    
				return this.cartList.reduce((total, item) => {
    
					return total + item.count
				}, 0)
			},
			//  The cumulative total price of all goods 
			totalPrice() {
    
				let amount = this.cartList.reduce((total, item) => {
    
					return total + item.totalPrice
				}, 0)
				//  Plus shipping charges  
				return (Math.round((amount+this.orderShopInfo.physical) * 10) / 10).toFixed(1)
			},
			//  Number of goods 
			total(){
    
				return this.cartList.length
			}
			
		},
		methods: {
    
			more() {
    
				console.log(this.max)
				this.max = this.total; // Add... Every time you click 1 strip 
			},
			pay() {
    
				let that = this
				uni.showModal({
    
					title: ' Tips ',
					content: ' Confirm payment order ？',
					success: function (res) {
    
						if (res.confirm) {
    
							//  Traverse the product information in the shopping cart 
							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();
							//  Build order entity 
							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);
							
							//  place order 
							that.$post('/addOrder', JSON.stringify(order)).then(res => {
    
								//  empty cart 
								that.$store.commit('clearCart')
								uni.showToast({
    
									title:' Add success ！',
									duration:1000
								})
								setTimeout(function () {
    
									uni.switchTab({
    
										url:'/pages/order/order'
									})
								}, 1000);
								
							})
						} else if (res.cancel) {
    
							console.log(' The user clicks cancel ');
						}
					}
				});
			}
		}
	}
</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 alignment  .right-fixed{
    
		position: fixed;
		right: 20px;
	}
</style>