《从入门到放弃-投票小程序源码分析》第二天-模板选择与用户交互的完美结合

hello，大家好，今天我们将深入探索投票小程序的精髓，特别是它如何巧妙地结合了模板选择和用户交互。这个源码不仅展示了投票小程序的基础架构，还揭示了其动态内容展示和交互逻辑的实现方式。接下来，我们将一起浏览代码的关键部分，深入理解每个组件的功能和它们是如何相互作用的。

效果展示

用户界面和模板展示

动态模板展示

<view class="template_box" :data-templapeId="item.id" @click="openDemo" v-for="(item, index) in templateList" :key="index"
	:style="'width:' +  boxWidth + 'px; height:' + boxHeight + 'px;'">
	<u-image :showLoading="true" :src="cos + item.cover" :width="boxWidth + 'px'"
		:height="boxHeight + 'px'" radius="5"></u-image>
	<view class="select_template_box cflex boxbb" :style="'width:' +  boxWidth + 'px;'">
		<text class="f14 u-line-1">{{ item.name }}</text>
		<view class="dflex jcsb">
			<button class="f12" :data-templapeId="item.id" @click.stop="openDemo">演示</button>
			<button v-if="isChangeTemplate" class="f12" @click.stop="changeTemplate" :data-templateId="item.id">更换此模板</button>
			<button v-else class="f12" @click.stop="createTemplate" :data-templateId="item.id">立即创建</button>
		</view>
	</view>

上面这段代码，主要实现了投票小程序中的模板展示功能。每个模板作为一个独立的视图，显示模板封面和名称。用户可以通过点击“演示”按钮查看模板示例，或者根据是否在编辑状态选择“更换此模板”或“立即创建”。动态绑定数据和样式，使界面在不同设备上保持一致的视觉效果。

分类标签和模板筛选

<u-tabs :list="tab" @click="tabClick" :activeStyle="{
	color: '#2879FE',
	fontWeight: 'bold',
	transform: 'scale(1.2)'
}" :inactiveStyle="{
	color: '#333333',
	transform: 'scale(1)'
}"></u-tabs>

此代码块用于实现分类标签的功能。u-tabs 组件用于展示不同的模板类别，点击标签时触发 tabClick 方法来筛选相应类别的模板。通过设置 activeStyle 和 inactiveStyle，使得当前选中的标签更加显眼，提升用户体验。

数据处理和页面逻辑

模板加载逻辑

onReachBottom() {
	if (this.page < this.last_page) { // 检查当前页是否小于最后页数
		this.page++; // 如果小于，页数加1
		this.loadTemplate(); // 然后调用加载数据的方法
	} else {
		this.showBottom = true
	}
}

这段代码处理页面滚动至底部时的逻辑。它检测当前页码与最后一页的关系，如果还有未加载的数据，它会自动加载下一页的模板。当所有页面都已加载完毕，showBottom 变量被设置为 true，提醒用户已到达页面底部。

登录状态刷新

refreshLoginStatus() {
	this.isLogin = true				
	uni.showToast({
		title: '登录成功,请继续操作',
		icon:'none',
		duration:2000
	})
}

这部分代码是用来刷新用户的登录状态。一旦用户完成登录，isLogin 变量被设为 true，并通过 uni.showToast 方法给用户显示一个友好的提示，告知登录成功并可继续操作。

好了，本次文章的小程序来源是：点点投票，在线投票小程序，支持H5版本，设计的非常漂亮，插件区颜值天花板，关注我，每天为您拆解优秀项目。这只是我们分析此投票小程序的起点。在接下来的文章中，我们将继续深入探索更多功能和实现细节。不要错过，一起见证一个现代投票系统的构建过程！