uniapp+vant weapp实现课程表小程序_课程表功能的实现

思路

课程表的实现,我想了很久,在没有现成组件库的情况下实现,我主要是用了vant weapp的宫格和单选框来实现,主要的难点有以下两个方面:

1.节数与天数和grid内单选框索引的转换

返回值给我一个包含课程节数和天数的对象数组,我把它转换成一个包含unit(5节课*7天的对应的数字来定位)的对象数组

2.单选框样式的魔改

单选框直接使用radio的插槽来贴图来适应样式需求

<van-radio-group :value="unit" @change="addClass">
				<van-grid :border="false" :column-num="7" :clickable="true">
					<van-grid-item v-for="value in 35" :key="value" use-slot custom-class="editCourse">
						<van-button type="primary" color="#006600" v-show="map[value]!==-1?true:false"
							@click="editCourse(value)"
							custom-style="padding-left:5rpx;line-height:35rpx;padding-right:5rpx;padding-top:5rpx;height:203rpx;margin: 0 auto;width:90rpx;border-radius: 10rpx;font-size:25rpx!important;font-weight:bold">
							<div>{
   {
   InfoMap[value].courseName}}</div>
						</van-button>
						<van-radio use-icon-slot :value="unit" :name="value" v-show="map[value]!==-1?false:true">
							<image style="margin-top:10rpx;height:190rpx;width:90rpx;" slot="icon"
								:src="unit===value?icon.choosed:icon.unChoosed" />
						</van-radio>

					</van-grid-item>
				</van-grid>
			</van-radio-group>

这样就看不出来是单选框了

温馨提示:尽量用原生

其他主要是布局和样式,没啥好说的.吐槽一句,vant组件库的插槽不是真的放在组件里面,而是悬浮在它上面,有时候会出现错位的情况.
所以能用原生尽量用原生,组件样式带原生样式,样式穿透和!important都不起作用,不太好把握(主要是我太菜了,css好难)

---

源码

Table.vue:

<template>
	<view>
		<bar :nav="setNav" />
		<van-popup :show="chooseWeek" @close="onCloseChooseWeek" position="bottom" custom-class="height:50%">
			<van-picker show-toolbar title="请选择现在的周数" :columns="weeks" @cancel="cancelChooseWeek" @confirm="confirmWeek"
				:loading="loadingTable" />
		</van-popup>
		<van-row>
			<van-col span="22" offset="2">
				<van-grid :border="false" :column-num="7" :clickable="true">
					<van-grid-item use-slot custom-class="week">
						<van-tag type="primary" color="#006600" custom-class="weekTag">
							周一
						</van-tag>
					</van-grid-item>
					<van-grid-item use-slot custom-class="week">
						<van-tag type="primary" color="#006600" custom-class="weekTag">
							周二
						</van-tag>
					</van-grid-item>
					<van-grid-item use-slot custom-class="week">
						<van-tag type="primary" color="#006600" custom-class="weekTag">
							周三
						</van-tag>
					</van-grid-item>
					<van-grid-item use-slot custom-class="week">
						<van-tag type="primary" color="#006600" custom-class="weekTag">
							周四
						</van-tag>
					</van-grid-item>
					<van-grid-item use-slot custom-class="week">
						<van-tag type="primary" color="#006600" custom-class="weekTag">
							周五
						</van-tag>
					</van-grid-item>
					<van-grid-item use-slot custom-class="week">
						<van-tag type="primary" color="#006600" custom-class="weekTag">
							周六
						</van-tag>
					</van-grid-item>
					<van-grid-item use-slot custom-class="week">
						<van-tag type="primary" color="#006600" custom-class="weekTag">
							周日
						</van-tag>
					</van-grid-item>
				</van-grid>
			</van-col>
		</van-row>
		<van-