一、测试
实现：

使用工作：
1、template，自定义九宫格，太简单

		<view class="Grid">
			<view class="Grid-Item" v-for="item in List" :key="item.id" @click="navClick(item.id)" 
			hover-class="click-hover" 
			hover-start-time="50"
			hover-stay-time="50">
				<view class="GSimg">
					<image class="Image" :src="item.img"/>
				</view>
			    <view class="GStitle">{{ item.title }}
				</view>
			</view>
		</view>

点击item背景色改变

hover-class：指定按下去的样式类
hover-start-time=“50”：按住后多久出现点击态
hover-stay-time=“50”：手指松开后点击态保留时间

2、script

<script>
	export default {
		data() {
			return {
				/*********************九宫格********************* */
				List:[
					{id:1,img:'/static/logo.png',title:'测试1'},
					{id:2,img:'/static/logo.png',title:'测试2'},
					{id:3,img:'/static/logo.png',title:'测试3'},
					{id:4,img:'/static/logo.png',title:'测试4'},
					{id:5,img:'/static/logo.png',title:'测试5'},
					{id:6,img:'/static/logo.png',title:'测试6'},
					{id:7,img:'/static/logo.png',title:'测试7'},
					{id:8,img:'/static/logo.png',title:'测试8'},
					{id:9,img:'/static/logo.png',title:'测试9'}]
			}
		},
		methods:{
			navClick(newId){
				if(newId == 1){
					uni.navigateTo({//跳转到另一个页面（这页面默认是有带的左箭头图标）
						url:"/pages/index/index",
					})
				}
				if(newId == 2){
					uni.navigateTo({
						
					})
					uni.setNavigationBarTitle({
						title:"统计报表",//跳转到同一个页面，让标题栏文字不同
					})
				}
				//...
			}
		}
	}
</script>

3、style

<style lang="scss">
	/*********************九宫格********************* */
	.Grid {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: space-between;
			background: #f7f7f7;
			padding:10rpx 0;
			.Grid-Item {
				width: 33.33%;
				height: 213rpx;
				text-align: center;
				border:1rpx solid #ff0000;
				box-sizing:border-box;
				.GSimg {
					width: 96rpx;
					height: 96rpx;
					margin-top: 42rpx;
					margin-left: 75rpx;
					.Image {
						width: 96rpx;
						height: 96rpx;
					}
				}
				.GStitle {
					width: 100%;
					height: 34rpx;
					line-height: 34rpx;
					color: #ff5500;
					font-size: 24rpx;
					margin-top: 20rpx;
				}
			}
	}
	.click-hover{
		background-color: #d0d0d0;
	}
</style>