uniappshell/pages/index/index.vue

<template>
	<view class="content">
		<div class="app-list">
			<div class="item" v-for="(item,index) in applist" @click="linkTo(item)">
				<image class="logo" src="/static/logo.png"></image>
				<view class="text-area">
					<text class="name">{{item.name}}</text>
				</view>			
			</div>			
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				applist: []
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData(){
				let applist=[];
				for(let i=0;i<11;i++){
					applist.push({
						id:i,
						name:"app-"+i,
						href:'http://baidu.com'
					})
				}
				this.applist=applist
			},
			linkTo(item){
				uni.navigateTo({
					url:`/pages/webview/webview?href=${item.href}&name=${item.name}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 20rpx 100rpx;
		.app-list{
			display: flex;
	        flex-wrap: wrap;
			.item{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-bottom: 20rpx;
				padding:0 6rpx;
				box-sizing: border-box;
				width: 20%;
				.logo {
					display: block;
					width: 100rpx;					
					height: 100rpx;					
				}
				.text-area {
					margin: 0;
					padding: 0;
					height: 30rpx;
					.name {
						font-size: 30rpx;
						color: #666;
						line-height:1;
					}
				}
			}
		}
	}

</style>