微信小程序时间轴

最新推荐文章于 2024-07-15 16:15:28 发布

原创

最新推荐文章于 2024-07-15 16:15:28 发布 · 2.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信

本文介绍了一个微信小程序中实现的日历组件，包括WXML结构、JS逻辑和WXSS样式。组件展示了日期选择，允许用户点击日期并返回今天。JS代码中包含了滑动事件处理，用于同步日历滚动和Swiper内容更新。此外，还详细描述了如何获取和处理日期数据，以及与后台交互获取用户待办事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、显示样式：

二、代码：

1.wxml：

<view class="header">
	<view class="header-left">
		<view class="header-left-top">{
  
  {selectedDay.year}}/{
  
  {selectedDay.month}}/{
  
  {selectedDay.day}}</view>
	</view>
	<view class="header-right">
		<button bindtap="returnToday" color="#4e8a8d" class=".button" round type="info">回到今天</button>
	</view>
</view>

<!-- 顶部日历部分 -->
<view class="page-section-spacing">
	<!-- scroll-into-view 不能以数字开头 -->
	<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" scroll-into-view="{
  
  {intoView}}"
		style="width: 100%">

		<!-- 这里用到了自定义属性，需要以 data 开头，以-连接，否则在event中获取不到 -->
		<view wx:for="{
  
  {dayList}}" wx:for-item="item" wx:for-index="index" wx:key="index" id="view{
  
  {index}}"
			class="scroll-view-item_H {
  
  {currentIndex==index ?'active':'noactive'}}" data-index="{
  
  {index}}"
			bindtap="clickDate">
			<view class="scroll-week">周{
  
  {item.week}}</view>
			<view class="scroll-day">{
  
  {item.day}}</view>
		</view>
	</scroll-view>
</view>

2.js:


Page({

	data: {
		//日期数组，每个元素都是一个对象，共有21个元素	{day: 10, month: 11, week: "二", year: 2020}
		dayList: [],
		// 一天的毫秒数
		millisecond: 86400000,
		// 生命周期函数中设置为 view7，用来控制 scroll-view 的滑动，滑动到指定项（该项的id和intoView的值相同）
		intoView: '',
		// 当前项的下标，初始值是7。从0开始，“今天”之前有7天，所以“今天”的下标是7
		currentIndex: 7,
		//