国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<th id="wkr27"></th>

微信小程序?qū)崿F(xiàn)課程表

2年前作者：蘇蘇哇哈哈分類：Toy博客閱讀(24)違法舉報

這篇具有很好參考價值的文章主要介紹了微信小程序?qū)崿F(xiàn)課程表。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

1.實現(xiàn)效果

微信小程序?qū)崿F(xiàn)課程表

2.實現(xiàn)步驟

2.1 獲取當(dāng)前日期一周數(shù)據(jù)

Date.getDay():
getDay() 方法返回指定日期是星期幾（從 0 到 6,星期日為 0，星期一為 1，依此類推。）。

var d = new Date();//2022-8-11
var n = d.getDay();//4--周四

Date.getDate():
getDate() 方法返回指定日期在月中的第幾天（從 1 到 31）。

var d = new Date();//2022-8-11
var n = d.getDate();//11

Date.setDate(day):
setDate() 方法將月份中的某一天設(shè)置為日期對象。

var d = new Date();//2022-8-11
d.setDate(15);//Mon Aug 15 2022 23:17:45 GMT+0800 (中國標(biāo)準(zhǔn)時間)

Date.getFullYear()
getFullYear() 方法可返回一個表示年份的 4 位數(shù)字。

var d = new Date():
var n = d.getFullYear();//2022

Date.getMonth() :
getMonth() 方法可返回表示月份的數(shù)字。返回值是 0（一月）到 11（十二月）之間的一個整數(shù)。( 一月為 0, 二月為 1, 以此類推。)

var d = new Date();
var n = d.getMonth();//7

日期格式化成yyyy-mm-dd格式：

/**
 * 格式化日期
 * @param {*} time 
 */
export const formateDate = (time) => {
  let year = time.getFullYear();
  let month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);
  let day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
  return year + '-' + month + '-' + day;
}

根據(jù)當(dāng)前日期獲取本周內(nèi)數(shù)據(jù)

/**
 * 獲取當(dāng)前日期一周內(nèi)的時間
 * @param {*} data 日期Date
 */
export const getCurrWeekList = (data) => {
  //根據(jù)日期獲取本周周一~周日的年-月-日
  let weekList = [],
    date = new Date(data);
  //獲取當(dāng)前日期為周一的日期
  date.setDate(date.getDay() == "0" ? date.getDate() - 6 : date.getDate() - date.getDay() + 1);
  // push周一數(shù)據(jù)
  weekList.push(formateDate(date));
  console.log(weekList)
  //push周二以后日期
  for (var i = 0; i < 6; i++) {
    date.setDate(date.getDate() + 1);
    weekList.push(formateDate(date));
  }
  return weekList;
}
//["2022-08-08", "2022-08-09", "2022-08-10", "2022-08-11", "2022-08-12", "2022-08-13", "2022-08-14"]

將得到的一周數(shù)據(jù)，拼接成我們想要的內(nèi)容

 let time = new Date(),
    list = getCurrWeekList(time),
    weekList = []
  list.forEach(item => {
    weekList.push({
      day: [item.split('-')[1], item.split('-')[2]].join('-'),//取字段eg：08-11
      week: "星期" + "日一二三四五六".charAt((new Date(item)).getDay()),//對應(yīng)周幾
      isCurr: formateDate(time) == item//高亮當(dāng)天日期
    })
  });

2.2 頁面布局及過渡動畫等效果

頁面布局
微信小程序?qū)崿F(xiàn)課程表
列表過渡動畫

animation: show 1.5s ease-in-out;

@keyframes show {
  0% {
    margin-left: 20rpx;
  }
  100% {
    margin-left: 0;
  }
}

文字傾斜

  font-style: italic;
  /* 斜體 font-style:oblique;或者 font-style: italic;*/

點擊課表詳情彈框過渡效果
注意：transition不能生效于一個從無到有的元素?。文章來源地址http://www.zghlxwxcb.cn/news/detail-492569.html


.modal.noShow {
  top: -0%;
  opacity: 0;
  transition: all 1s;
}

.modal.show {
  top: 50%;
  transition: all 1s;
  opacity: 1;
}

2.3 課表數(shù)據(jù)

如頁面布局中，黑框數(shù)據(jù)為一組，一行最多7條數(shù)據(jù),排除周六日，正常最多為5條數(shù)據(jù)。
針對無數(shù)據(jù)項，正常添加數(shù)據(jù)（為補(bǔ)齊頁面，頁面對齊），為該項設(shè)置type為0（表示無數(shù)據(jù)），并且過濾點擊詳情事件。

3.實現(xiàn)代碼

3.1 頁面

<view class="flex-row head">
  <view class="head-left flex-column j_c">
    <image src="https://s3.bmp.ovh/imgs/2022/07/27/6289fe4ab016c74a.png" class="head-icon" />
    <text class="head-left-text one">第</text>
    <text class="head-left-text two">周</text>
    <text class="head-curr-week">{{currentWeek}}</text>
  </view>
  <view class="head-right flex-row j_b">
    <view class="flex-column j_c" wx:for="{{weekList}}" wx:key="list">
      <text class="head-week {{item.isCurr && 'head-right-curr'}}">{{item.week}}</text>
      <text class=" {{item.isCurr && 'head-right-curr'}}">{{item.isCurr?'今天':item.day}}</text>
    </view>
  </view>
</view>
<view class="container flex-row mb20">
  <view class="container-left flex-column j_b">
    <block wx:for="{{time.one}}" wx:key="list">
      <view class="flex-column j_c">
        <text class="con-title">{{item.index}}</text>
        <text>{{item.timeStart}}</text>
        <text>{{item.timeEnd}}</text>
      </view>
    </block>
  </view>
  <view class="container-right  flex col j_c">
    <view class="flex-row mb10">
      <view class="con-item flex-column j_c " wx:for="{{schedule.one}}" wx:key="list" style="background: {{item.color}};" catchtap="{{item.type ? 'getDetail':''}}" data-item="{{item}}">
        <text class="con-item-subj line_ellipsis">{{item.sub}}</text>
        <text class="line_ellipsis">{{item.tec}}</text>
        <text class="line_ellipsis">{{item.add}}</text>
      </view>
    </view>
    <view class="flex-row">
      <view class="con-item flex-column j_c " wx:for="{{schedule.two}}" wx:key="list" style="background: {{item.color}};" catchtap="{{item.type ? 'getDetail':''}}" data-item="{{item}}">
        <text class="con-item-subj">{{item.sub}}</text>
        <text>{{item.tec}}</text>
        <text>{{item.add}}</text>
      </view>
    </view>
    <image src="https://s3.bmp.ovh/imgs/2022/07/27/85dabf1d5821a98b.png" class="con-icon" />
  </view>
</view>
<view class="container flex-row mb20">
  <view class="container-left left1">
    <block wx:for="{{time.two}}" wx:key="list">
      <view class="flex-column j_c">
        <text class="con-title">{{item.index}}</text>
        <text>{{item.timeStart}}</text>
        <text>{{item.timeEnd}}</text>
      </view>
    </block>
  </view>
  <view class="container-right right1  flex col j_c">
    <view class="flex-row">
      <view class="con-item flex-column j_c " wx:for="{{schedule.three}}" wx:key="list" style="background: {{item.color}};" catchtap="{{item.type ? 'getDetail':''}}" data-item="{{item}}">
        <text class="con-item-subj line_ellipsis">{{item.sub}}</text>
        <text class="line_ellipsis">{{item.tec}}</text>
        <text class="line_ellipsis">{{item.add}}</text>
      </view>
    </view>
    <image src="https://s3.bmp.ovh/imgs/2022/07/27/85dabf1d5821a98b.png" class="con-icon" />
  </view>
</view>
<view class="container flex-row">
  <view class="container-left left1">
    <block wx:for="{{time.three}}" wx:key="list">
      <view class="flex-column j_c">
        <text class="con-title">{{item.index}}</text>
        <text>{{item.timeStart}}</text>
        <text>{{item.timeEnd}}</text>
      </view>
    </block>
  </view>
  <view class="container-right right1 flex col j_c">
    <view class="flex-row">
      <view class="con-item flex-column j_c " wx:for="{{schedule.four}}" wx:key="list" style="background: {{item.color}};" catchtap="{{item.type ? 'getDetail':''}}" data-item="{{item}}">
        <text class="con-item-subj line_ellipsis">{{item.sub}}</text>
        <text class="line_ellipsis">{{item.tec}}</text>
        <text class="line_ellipsis">{{item.add}}</text>
      </view>
    </view>
    <image src="https://s3.bmp.ovh/imgs/2022/07/27/85dabf1d5821a98b.png" class="con-icon" />
  </view>
</view>
<!-- 詳情彈框 -->
<view class="mask" hidden="{{!isShow}}" catchtap="close"></view>
<view class="modal flex-column j_c {{isShow ? 'show':'noShow'}}" style="background: {{current.color}};">
  <view>{{current.sub}}</view>
  <view>{{current.add}}</view>
  <view>{{current.tec}}</view>
</view>

3.2 樣式

page {
  padding: 30rpx 20rpx;
}

.head {
  margin-bottom: 20rpx;
}

.head-left {
  border-radius: 10rpx;
  height: 125rpx;
  background: #fff;
  width: 90rpx;
  margin-right: 10rpx;
  position: relative;
}

.head-left-text {
  position: absolute;
  color: #7e7a7a;
  font-size: 22rpx;
}

.head-curr-week {
  font-weight: bold;
  font-size: 30rpx;
  font-style: italic;
  /* 斜體 font-style:oblique;或者 font-style: italic;*/
}

.head-left-text.one {
  right: 2px;
  top: 2px;
}

.head-left-text.two {
  left: 2px;
  bottom: 2px;
}

.head-week {
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #333;
}

.head-right-curr {
  color: pink;
}

.head-icon {
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  top: -10rpx;
  left: -10rpx;
}

.head-right {
  border-radius: 10rpx;
  height: 125rpx;
  background: #fff;
  width: 610rpx;
  font-size: 23rpx;
  box-sizing: border-box;
  padding: 0 10rpx;
  color: #7e7a7a;
}

.con-title {
  font-weight: bold;
  margin-bottom: 6rpx;
  color: #333;
  font-size: 27rpx;
  font-style: italic;
}

.container-left {
  border-radius: 10rpx;
  height: 500rpx;
  background: #fff;
  width: 90rpx;
  margin-right: 10rpx;
  box-sizing: border-box;
  padding: 20rpx 0;
  font-size: 24rpx;
  color: #7e7a7a;
}

.container-right {
  border-radius: 10rpx;
  height: 500rpx;
  background: #fff;
  width: 610rpx;
  position: relative;
  box-sizing: border-box;
  padding: 20rpx 10rpx;
}

.con-icon {
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  bottom: -10rpx;
  right: -10rpx;
}

.container-left.left1,
.container-right.right1 {
  height: 250rpx;
}

.con-item {
  width: 80rpx;
  height: 225rpx;
  border-radius: 10rpx;
  margin-right: 7rpx;
  flex-shrink: 0;
  font-size: 17rpx;
  color: #fff;
  box-sizing: border-box;
  padding: 10rpx;
  line-height: 28rpx;
  animation: show 1.5s ease-in-out;
}

@keyframes show {
  0% {
    margin-left: 20rpx;
  }
  100% {
    margin-left: 0;
  }
}

.con-item-subj {
  font-weight: bold;
  font-size: 19rpx;
  margin-bottom: 5rpx;
}

.con-item:last-child {
  margin-right: 0;
}

/* 多行文字換行 */
.line_ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* 彈框 */
.modal {
  width: 550rpx;
  height: 350rpx;
  border-radius: 20rpx;
  position: fixed;
  z-index: 1111;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
  color: #7e7a7a;
  font-size: 27rpx;
  line-height: 40rpx;
}

.modal.noShow {
  top: -0%;
  opacity: 0;
  transition: all 1s;
}

.modal.show {
  top: 50%;
  transition: all 1s;
  opacity: 1;
}

3.3 交互

import {
  getCurrWeekList,
  formateDate
} from '../utils/tools'
Page({
  data: {
    currentWeek: 10,
    time: {
      one: [{
          index: 1,
          timeStart: '08:00',
          timeEnd: '08:45'
        },
        {
          index: 2,
          timeStart: '08:55',
          timeEnd: '09:40'
        },
        {
          index: 3,
          timeStart: '09:50',
          timeEnd: '10:45'
        },
        {
          index: 4,
          timeStart: '10:50',
          timeEnd: '11:35'
        }
      ],
      two: [{
          index: 5,
          timeStart: '13:30',
          timeEnd: '14:15'
        },
        {
          index: 6,
          timeStart: '14:25',
          timeEnd: '15:10'
        },
      ],
      three: [{
          index: 7,
          timeStart: '15:20',
          timeEnd: '16:05'
        },
        {
          index: 8,
          timeStart: '16:15',
          timeEnd: '17:00'
        },
      ]
    },
    schedule: {
      one: [{
          sub: '編譯原理',
          add: 'B202',
          tec: "蘇蘇蘇",
          color: '#fad0c4',
          type: 1, //0-無  1-有
        },
        {
          sub: '',
          add: '',
          tec: "",
          color: '',
          type: 0,
        }, {
          sub: '操作系統(tǒng)',
          add: 'N502',
          tec: "蘇蘇蘇",
          color: '#ff9a9e',
          type: 1,
        },
        {
          sub: '',
          add: '',
          tec: "",
          color: '',
          type: 0,
        },
        {
          sub: '',
          add: '',
          tec: "",
          color: '',
          type: 0,
        },
      ],
      ....
    },
    weekList: [],
    isShow: false,
    current: {},
  },
  getDetail(e) {
    let {
      item
    } = e.currentTarget.dataset;
    this.setData({
      current: item,
      isShow: true
    })
  },
  close() {
    this.setData({
      isShow: false
    })
  },
  onShow() {
    let time = new Date(),
      list = getCurrWeekList(time),
      weekList = []
    list.forEach(item => {
      weekList.push({
        day: [item.split('-')[1], item.split('-')[2]].join('-'),
        week: "星期" + "日一二三四五六".charAt((new Date(item)).getDay()),
        isCurr: formateDate(time) == item
      })
    });
    this.setData({
      weekList,
    })
  },
})

4.更多小程序demo，盡在蘇蘇的碼云如果對你有幫助，歡迎你的star+訂閱！

到了這里，關(guān)于微信小程序?qū)崿F(xiàn)課程表的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進(jìn)行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

【LeetCode熱題100】打卡第38天：課程表&實現(xiàn)前綴樹
大家好，我是知識汲取者，歡迎來到我的LeetCode熱題100刷題專欄！精選 100 道力扣（LeetCode）上最熱門的題目，適合初識算法與數(shù)據(jù)結(jié)構(gòu)的新手和想要在短時間內(nèi)高效提升的人，熟練掌握這 100 道題，你就已經(jīng)具備了在代碼世界通行的基本能力。在此專欄中，我們將會涵蓋各種
2024年02月17日
瀏覽(16)
LeetCode：207. 課程表、210. 課程表 II（拓?fù)渑判?C++）
目錄 207. 課程表題目描述：實現(xiàn)代碼與解析：拓?fù)渑判?210. 課程表 II 題目描述：實現(xiàn)代碼與解析：拓?fù)渑判?原理思路： ????????你這個學(xué)期必須選修? numCourses ?門課程，記為? 0 ?到? numCourses - 1 ?。在選修某些課程之前需要一些先修課程。先修課程按數(shù)組? prereq
2024年02月09日
瀏覽(20)
leetcode207. 課程表
你這個學(xué)期必須選修 numCourses 門課程，記為 0 到 numCourses - 1 。在選修某些課程之前需要一些先修課程。先修課程按數(shù)組 prerequisites 給出，其中 prerequisites[i] = [ai, bi] ，表示如果要學(xué)習(xí)課程 ai 則必須先學(xué)習(xí)課程 bi 。例如，先修課程對 [0, 1] 表示：想要學(xué)習(xí)課程 0 ，你需要先
2023年04月24日
瀏覽(21)
210. 課程表 II Python
現(xiàn)在你總共有 numCourses 門課需要選，記為 0 到 numCourses - 1 。給你一個數(shù)組 prerequisites ，其中 prerequisites[i] = [ai, bi] ，表示在選修課程 ai 前必須先選修 bi 。返回你為了學(xué)完所有課程所安排的學(xué)習(xí)順序?？赡軙卸鄠€正確的順序，你只要返回任意一種就可以了。如果不可能完
2024年02月14日
瀏覽(17)
leetcode 630. 課程表 III
這里有 n 門不同的在線課程，按從 1 到 n 編號。給你一個數(shù)組 courses ，其中 courses[i] = [durationi, lastDayi] 表示第 i 門課將會持續(xù) 上 durationi 天課，并且必須在不晚于 lastDayi 的時候完成。你的學(xué)期從第 1 天開始。且不能同時修讀兩門及兩門以上的課程。返回你最多可以修讀的課
2024年02月16日
瀏覽(12)
【圖論】Leetcode 207. 課程表【中等】
你這個學(xué)期必須選修 numCourses 門課程，記為 0 到 numCourses - 1 。在選修某些課程之前需要一些先修課程。先修課程按數(shù)組 prerequisites 給出，其中 prerequisites[i] = [ai, bi] ，表示如果要學(xué)習(xí)課程 ai 則必須先學(xué)習(xí)課程 bi 。例如，先修課程對 [0, 1] 表示：想要學(xué)習(xí)課程 0 ，你需要先
2024年04月14日
瀏覽(24)
刷題筆記25——圖論課程表
為了最終理解你所不理解的，你必須經(jīng)歷一條愚昧無知的道路。為了占有你從未占有的東西，你必須經(jīng)歷被剝奪的道路。為了達(dá)到你現(xiàn)在所不在的名位,你必須經(jīng)歷那條你不在其中的道路?！蕴?非常奇妙，我最初的錯誤是如下，在找到目標(biāo)節(jié)點后直接加入到res中，但是
2024年02月07日
瀏覽(12)
HTML入門用標(biāo)簽寫一個課程表
完成樣式相關(guān)筆記
2024年01月19日
瀏覽(21)
【LeetCode】210. 課程表 II——拓?fù)渑判?/a>
題目鏈接：210. 課程表 II 題目描述：現(xiàn)在你總共有 numCourses 門課需要選，記為 0 到 numCourses - 1。給你一個數(shù)組 prerequisites ，其中 prerequisites[i] = [ai, bi] ，表示在選修課程 ai 前必須先選修 bi 。例如，想要學(xué)習(xí)課程 0 ，你需要先完成課程 1 ，我們用一個匹配來表示：[0,1] 。返
2024年02月09日
瀏覽(21)
前端drag api課程表demo
HTML CSS JS
2024年02月07日
瀏覽(15)