概要:市販されているいくつかのタイムテーブルソフトウェアから教訓を得ました。機能が複雑すぎるため、タイムテーブルアプレットを作成してオープンソース化しようとしました。現在、タイムテーブルの追加と削除の機能をサポートしており、毎日のタイムテーブルも追加しています。全体的に、かなり簡潔なタイムテーブルのような感じです。バックエンドは fastadmin に基づいて開発されています。 GIFデモ:giteeのオープンソースアドレスは下部に配置されます 最近、現在のインターフェースはシンプルすぎて、私のようなきちんとした人のニーズを満たしていないと常に感じているので、コーススケジュールの背景をカスタマイズする機能を追加しました。 効果: mine.js にエントリを追加する必要があります: { 名前: "タイムテーブルの背景を設定する", アイコン: "/images/scheduleIcon.png", url: "/pages/schedule/schedule?", }, 新しいページスケジュールを追加する wxml コード <view style="height:{{CustomBar}}px;"> <view class="cu-bar ev-fr-start" bindtap="BackPage" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;"> <text class="cuIcon-back padding-lr-sm"></text> <view class="action">{{couples? "Ta の背景を設定する":"タイムテーブルの背景を設定する"}}</view> </ビュー> </ビュー> <view wx:if="{{couples}}" class="ev-mainBody"> <view class="ev-fc-center"> <view wx:if="{{!CouplesBG}}" data-type='カップル' bind:tap="modifyImage" class="addBG ev-fc-center"> <text class="cuIcon-roundadd" style="color:#5E99FB"></text> <text class="padding-xs" style="color:#5E99FB">背景をアップロード</text> </ビュー> <view wx:if="{{CouplesBG}}" class="BGBox ev-fc-center"> <view class="BGImg" data-type='カップル' bind:tap="modifyImage"> <image mode="aspectFill" src="{{CouplesBG}}" /> </ビュー> <view class="round BGState">カップルのタイムテーブルの背景</view> </ビュー> </ビュー> <view class="padding-top"> <view class="title">背景表示開始時刻</view> <dateTimePicker type="minute" bind:change="TimePicker"> <view class="sendTimeBox ev-fr"> <input type="text" class="sendTime padding-lr" disabled="{{true}}" value="{{sendTime}}" /> <text style="font-size:24px;color:#92979D" class="cuIcon-triangledownfill padding-lr-sm"></text> </ビュー> </dateTimePicker> </ビュー> <view class="padding-top"> <view class="title">背景の表示期間を設定する</view> <button wx:for="{{displayTimeList}}" wx:key="index" class="cu-btn round margin-tb {{item.checked ? 'bg-blue':''}} margin-right" data-id="{{index}}" bind:tap="showTime"> {{item.label}} </ボタン> </ビュー> <button bind:tap="saveCouplesBG" disabled="{{!CouplesBG}}" class="cu-btn block bg-blue margin-tb-sm lg saveButton" style="bottom: {{StatusBar}}px;" type=""> 保存</button> </ビュー> <view wx:else class="ev-mainBody"> <表示> <image class="message" mode="scaleToFill" src="/images/scheduleIcon.png" /> </ビュー> <表示> <text class="title">タイムテーブルの背景を設定する</text> <view class="padding-top-sm tips">ユーザーは、お気に入りの写真をアップロードして、時刻表の背景として表示できます (画像をクリックすると置き換えられます)</view> </ビュー> <view class="ev-fr BGListBox"> <view wx:if="{{dailySchedule}}" class="BGBox ev-fc-center"> <view class="BGImg" data-type='daily' bind:tap="modifyImage"> <image mode="aspectFill" src="{{dailySchedule}}" /> </ビュー> <view class="round BGState">毎日のスケジュールの背景</view> </ビュー> <view wx:if="{{!dailySchedule}}" data-type='daily' bind:tap="modifyImage" class="addBG ev-fc-center"> <text class="cuIcon-roundadd" style="color:#5E99FB"></text> <text class="padding-xs" style="color:#5E99FB">毎日のスケジュールの背景をアップロード</text> </ビュー> <view wx:if="{{weeklySchedule}}" class="BGBox ev-fc-center"> <view class="BGImg" data-type='week' bind:tap="modifyImage"> <image mode="aspectFill" src="{{weeklySchedule}}" /> </ビュー> <view class="round BGState">週間スケジュールの背景</view> </ビュー> <view wx:if="{{!weeklySchedule}}" data-type='week' bind:tap="modifyImage" class="addBG ev-fc-center"> <text class="cuIcon-roundadd" style="color:#5E99FB"></text> <text class="padding-xs" style="color:#5E99FB">週ごとのタイムテーブルの背景をアップロード</text> </ビュー> </ビュー> <button wx:if="{{(weeklySchedule || dailySchedule)}}" bind:tap="saveButton" class="cu-btn block bg-blue margin-tb-sm lg saveButton" style="bottom: {{StatusBar}}px;" type=""> デフォルトの背景を復元する</button> </ビュー> jsコード 輸入 { スケジュールBG、 カップルBG、 カップル情報追加、 setbgdefault、 } から "../../utils/api/user"; //アプリケーションインスタンスを取得します。const app = getApp(); dayjs を require("../../utils/dayjs/dayjs.min"); 「../../utils/promisify」から { wxShowToast } をインポートします。 ページ({ データ: { ステータスバー: app.globalData.StatusBar、 カスタムバー: app.globalData.CustomBar、 画像URL: app.globalData.ImgUrl、 表示領域: app.globalData.displayArea、 CouplesBG: null, // カップルのスケジュールの背景 dailySchedule: null, // 日次スケジュールの背景 weeklySchedule: null, // 週間スケジュールの背景 sendTime: "now", // カップルのスケジュールの背景の開始時刻 displayTimeList: [ { ラベル: 「ある日」、 チェック済み: false、 時間: 1, }, { ラベル:「1週間」、 チェック済み: true、 時間: 7, }, { ラベル:「1か月」、 チェック済み: false、 時間: 30, }, ]、 開始時間: null、 }, onLoad: 関数 (クエリ) { index_bgimage、table_bgimage を app.globalData.userInfo に設定します。 this.setData({ カップル: query.couples ? query.couples : null, 毎日のスケジュール: index_bgimage ? app.globalData.ImgUrl + index_bgimage : null, //日次スケジュールの背景 weeklySchedule: table_bgimage ? app.globalData.ImgUrl + テーブルbgimage : null, // 週間スケジュールの背景}); }, /** * 1ページ戻る */ バックページ() { wx.navigateBack({ デルタ: 1, }); }, /** * 表示時間を切り替える */ 表示時間(e) { id = e.currentTarget.dataset.id とします。 console.log(e.currentTarget.dataset.id); displayTimeList を this.data.displayTimeList.map((v, i) => { とします。 v.checked = id === i; v を返します。 }); this.setData({ 表示時間リスト、 }); }, /** * 背景を変更する */ 画像を変更する(e) { type = e.currentTarget.dataset.type とします。 wx.chooseImage({ カウント: 1, sizeType: ["圧縮"], ソースタイプ: ["アルバム"], 成功: (res) => { // tempFilePath は、画像を表示するための img タグの src 属性として使用できます。const tempFilePaths = res.tempFilePaths; スイッチ(タイプ){ ケース「週」: scheduleBG(tempFilePaths[0], "table").then((v) => { アプリの getSet(); v.code && wxShowToast(v.msg); this.setData({ 週次スケジュール: tempFilePaths[0], }); }); 壊す; 「毎日」の場合: scheduleBG(tempFilePaths[0], "index").then((v) => { アプリの getSet(); v.code && wxShowToast(v.msg); this.setData({ 毎日のスケジュール: tempFilePaths[0], }); }); 壊す; ケース「カップル」: カップルBG(tempFilePaths[0]).then((v) => { コンソールログ(v); アプリの getSet(); v.code && wxShowToast(v.msg); this.setData({ カップルBG: app.globalData.ImgUrl + v.data.imgurl、 }); }); 壊す; デフォルト: wxShowToast("設定に失敗しました。もう一度お試しください"); 壊す; } }, }); }, /** * デフォルトの背景を復元 */ 保存ボタン() { this.setData({ 毎日のスケジュール: null、 週スケジュール: null、 }); setbgdefault().then((v) => { v.code && wxShowToast(v.msg); アプリの getSet(); }); }, /** * カップルクラススケジュールの開始時間 */ タイムピッカー(e) { day = dayjs(e.detail).format("MM月DD日"); am = dayjs(e.detail).format("A") == "PM" ? "午後" : "午前" とします。 time = dayjs(e.detail).format("HH:mm"); とします。 sendTime を `${day} ${am} ${time}` とします。 console.log(sendTime, "TimePicker"); this.setData({ 送信時間、 開始時間: dayjs(e.detail)、 }); }, /** * カップルの背景を保存 */ 保存カップルBG() { let { displayTimeList, startTime, CouplesBG } = this.data; endType = displayTimeList.filter((v) => v.checked === true)[0]とします。 _startTime を startTime とします。dayjs(startTime): dayjs(); endTime = endType.time とします。 tid = app.globalData.userInfo.lovers_id とします。 もし (!tid) { wx.showToast({ タイトル: 「保存に失敗しました」 アイコン: "なし", 期間: 2000, }); 戻る; } カップル情報追加({ ティッド、 開始時刻: _startTime.unix(), 終了時間: 終了時間、 ラブソート: 1, 内容: CouplesBG.replace(this.data.ImgUrl, ""), }).then((v) => { wxShowToast(v.msg); if (v.code) { app.getSet().then(() => { this.BackPage(); }); } }); }, }); wssコード ヘッドボックス{ 幅: 750rpx; } ページ { 背景色: #fff; } .BGリストボックス{ flex-wrap: ラップ; コンテンツの両端揃え: スペース間のスペース; } .BGボックス{ 幅: 321rpx; 高さ: 321rpx; 境界線の半径: 34rpx; オーバーフロー: 非表示; 上マージン: 22rpx; } .BGBox .BGImg { 幅: 321rpx; 高さ: 321rpx; } .BGBox .BGState { 位置: 相対的; 背景: #000000; 不透明度: 0.5; パディング: 10rpx 20rpx; 下部: 50rpx; 色: #fff; } .addBG{ 幅: 321rpx; 高さ: 321rpx; 上マージン: 22rpx; 境界線: 1rpx 破線 #92979d; 境界線の半径: 24rpx; 境界線の半径: 34rpx; } 。メッセージ { 幅: 70rpx; 高さ: 70rpx; 上マージン: 20rpx; } 。タイトル { フォントサイズ: 32rpx; フォントの太さ: 500; 行の高さ: 45rpx; 色: #282b2f; } .ヒント { フォントサイズ: 24rpx; フォントの太さ: 400; 行の高さ: 33rpx; 色: #92979d; } .sendTimeBox{ 幅: 686rpx; 高さ: 90rpx; 背景: #ffffff; 境界線: 1rpx 実線 #dfe4ea; 境界線の半径: 14rpx; マージン: 24rpx 0; } *** オープンソースアドレス: 以上で、JS を使ってクラススケジュール (スーパークラススケジュールを模倣) という小さなプログラムを実装し、カスタム背景機能を追加する方法についての記事は終了です。スーパークラススケジュールに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: html2canvas を使用して、Baidu マップを含む Dom 要素を画像に処理するソリューション
>>: Apple の携帯電話のロックを解除するときに光沢のあるフォント効果を実現するために CSS3 を使用する例
1. v-onイベント監視DOM イベントをリッスンするには、v-on ディレクティブを使用します。...
背景: position:sticky はスティッキー配置とも呼ばれます。スティッキー配置の要素は、...
この記事では、カレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...
コードをコピーコードは次のとおりです。 <オブジェクト id="player1&qu...
目次1. RGBを使用して色を表す2. Tkinter キャンバスコンポーネント3. グラデーション...
目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...
目次1. デフォルトで表示と非表示を切り替える2. スライドして表示と非表示を切り替える3. フェー...
目次序文シナリオシミュレーション要約する序文最近、sql_mode の話題については何度も話し合われ...
この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています...
目次インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックスプッ...
1. 各関数はオブジェクトであり、メモリを占有します。メモリ内のオブジェクトが増えるほど、パフォーマ...
注意:仮想マシンのメモリは2G以上が推奨され、 Alibaba Cloudのアクセラレーションイメー...
サイト全体で https アクセスを有効にしてから、共有コードが利用できなくなり、有効になっていた小...
1. ホット デプロイメント: コンテナの実行中にプロジェクト全体を再デプロイすることを意味します。...
レンダリング下の画像のような効果を実現したい場合は、読み続けてアニメーション画像に直接進んでください...