JSはカリキュラムタイムテーブルアプレット(スーパーカリキュラムタイムテーブルを模倣)を実装し、カスタムバックグラウンド機能を追加します

JSはカリキュラムタイムテーブルアプレット(スーパーカリキュラムタイムテーブルを模倣)を実装し、カスタムバックグラウンド機能を追加します

概要:

市販されているいくつかのタイムテーブルソフトウェアから教訓を得ました。機能が複雑すぎるため、タイムテーブルアプレットを作成してオープンソース化しようとしました。現在、タイムテーブルの追加と削除の機能をサポートしており、毎日のタイムテーブルも追加しています。全体的に、かなり簡潔なタイムテーブルのような感じです。バックエンドは 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; }

*** オープンソースアドレス:
gitee オープンソース: (https://gitee.com/chengdu-gengzixin_liu-jiyuan/timetable)

以上で、JS を使ってクラススケジュール (スーパークラススケジュールを模倣) という小さなプログラムを実装し、カスタム背景機能を追加する方法についての記事は終了です。スーパークラススケジュールに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript はクラス宝くじアプレットを実装します
  • ランダム点呼アプレットを実装する JavaScript
  • WeChat アプレット スライダー機能を自分で記述するための 12 行の js コード (推奨)
  • 携帯電話番号を取得するためのWeChatアプレットJavaScript復号化サンプルコードの詳細な説明

<<:  html2canvas を使用して、Baidu マップを含む Dom 要素を画像に処理するソリューション

>>:  Apple の携帯電話のロックを解除するときに光沢のあるフォント効果を実現するために CSS3 を使用する例

推薦する

Vue.js フロントエンドフレームワークにおけるイベント処理の概要

1. v-onイベント監視DOM イベントをリッスンするには、v-on ディレクティブを使用します。...

位置のいくつかの巧妙な応用の詳細な説明:sticky スティッキーポジショニング

背景: position:sticky はスティッキー配置とも呼ばれます。スティッキー配置の要素は、...

カレンダー効果を実現するJavaScript

この記事では、カレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...

ウェブページでmp3またはフラッシュプレーヤーコードを再生する

コードをコピーコードは次のとおりです。 <オブジェクト id="player1&qu...

Tkinterはjsキャンバスを使用してグラデーションカラーを実現します

目次1. RGBを使用して色を表す2. Tkinter キャンバスコンポーネント3. グラデーション...

CocosCreator の新しいリソース管理システムの分析

目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...

jQueryフレームワークは、要素の表示と非表示の3つのアニメーションメソッドを実装しています。

目次1. デフォルトで表示と非表示を切り替える2. スライドして表示と非表示を切り替える3. フェー...

MySQL sql_mode の変更が有効にならない理由と解決策

目次序文シナリオシミュレーション要約する序文最近、sql_mode の話題については何度も話し合われ...

React で setInterval 関数を使用する例

この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています...

MySQL インデックス プッシュダウンを 5 分で理解する

目次インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックスプッ...

jsイベント委譲の詳細な説明

1. 各関数はオブジェクトであり、メモリを占有します。メモリ内のオブジェクトが増えるほど、パフォーマ...

Docker ベースの GitLab 環境をデプロイする方法と手順

注意:仮想マシンのメモリは2G以上が推奨され、 Alibaba Cloudのアクセラレーションイメー...

HttpsページでBaiduシェアを使用するためのソリューション

サイト全体で https アクセスを有効にしてから、共有コードが利用できなくなり、有効になっていた小...

Eclipse/Tomcat でホットデプロイメントとホットスタートを実装する方法

1. ホット デプロイメント: コンテナの実行中にプロジェクト全体を再デプロイすることを意味します。...

Echarts は 1 つのグラフ内で異なる X 軸を切り替える機能を実装します (サンプル コード)

レンダリング下の画像のような効果を実現したい場合は、読み続けてアニメーション画像に直接進んでください...