ミニプログラムはリストのカウントダウン機能を実装します

ミニプログラムはリストのカウントダウン機能を実装します

この記事の例では、ミニプログラムでリストカウントダウンを実装するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

効果

HTMLコード

<view class="hbMpBox" wx:for="{{mpThing}}" data-goodsId="{{item.goods_id}}" data-id="{{index}}" bindtap="navSeceGroup">
    <ビュークラス="hbMpBox_l">
      <画像 src="{{item.goods_img}}"></画像>
    </ビュー>
    <ビュークラス="hbMpBox_r">
      <view class="hbMpBox_r_head">{{item.goods_name}}</view>
      <view class="hbMpBox_r_time">
        <view class="syTime_tx" style="font-weight: 600;">終了までの距離:</view>
        <view class="syTime_day">{{item.goods_time[0]}}日</view>
        <view class="syTime_time syTime_time1">{{item.goods_time[1]}}</view>
        <view class="syTime_time1">:</view>
        <view class="syTime_time syTime_time2">{{item.goods_time[2]}}</view>
        <view class="syTime_time1">:</view>
        <view class="syTime_time syTime_time3">{{item.goods_time[3]}}</view>
 
      </ビュー>
      <view class="hbMpBox_r_price">
        <view class="hbMpBox_r_price_l">
          <view class="hbMpBox_r_price_l_box onFontNow" style="max-width: 400rpx;">
            <text style="color: #999;">グループ価格:</text><text style="color: #d13d4b;font-size: 34rpx;">¥{{item.secs_price}}</text>
          </ビュー>
           
        </ビュー>
        <view class="hbMpBox_r_price_r">
          楽しいグループ
      </ビュー>
    </ビュー>
  </ビュー>
  <view class="indexMptxBox" wx:if="{{mpThing[0]}}" bindtap="secondGroupNav">
    クリックして詳細を表示</view>

CSSコード

/*2番目のスペルスタイルの書き方*/
.hbMpBox{
  パディング: 20rpx;
  背景: #fff;
  ディスプレイ: フレックス;
  ボーダー下部: 2rpx #eee 実線;
}
.hbMpBox .hbMpBox_l{
  幅: 155rpx;
  高さ: 140rpx;
  最小幅: 155rpx;
 
}
.hbMpBox .hbMpBox_l イメージ{
  幅: 100%;
  高さ: 100%;
}
.hbMpBox .hbMpBox_r{
  幅: 540rpx;
  左マージン: 20rpx;
  色: #333;
  フォントサイズ: 22rpx;
  位置: 相対的;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_bb{
  ディスプレイ: フレックス;
  位置: 相対的;
  上マージン: 10rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l2{
  位置: 相対的;
  最大幅: 270rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_hh{
  フォントサイズ: 28rpx;
  最大幅: 270rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l2 .hbMpBox_r_l2_h{
  フォントサイズ: 40rpx;
 
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l2 .hbMpBox_r_l2_des{
  幅: 100%;
  右マージン: 20rpx;
  上マージン: 10rpx;
  色: #a8a8a8;
  行の高さ: 35rpx;
  高さ: 70rpx;
  単語区切り: 全区切り;
  テキストオーバーフロー: 省略記号;
  display: -webkit-box; /** オブジェクトは伸縮ボックスモデルとして表示されます**/
  -webkit-box-orient: vertical; /** フレックスボックスオブジェクトの子要素の配置を設定または取得します **/
  -webkit-line-clamp: 2; /** 表示される行数 **/
  overflow: hidden; /** オーバーフローしたコンテンツを非表示にする**/
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l2 .hbMpBox_r_l2_text{
  フォントの太さ: 600;
  色: #d13d4b;
  上マージン: 10rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_head{
  フォントサイズ: 28rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_des{
  上マージン: 4rpx;
  色: #999;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l2_Time{
  フォントサイズ: 20rpx;
  色: #bdbdbd;
  単語間隔: 5rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_l2_Time .fontTime{
  フォントの太さ: 900;
  フォントサイズ: 26rpx;
  色: #7c7d7f;
}
.hbMpBox_r .hbMpBox_r_r2{
  最小幅: 210rpx;
  最大幅: 48%;
  境界線: 2rpx #d13d4b 実線;
  境界線の半径: 10rpx;
  最大高さ: 110rpx;
  位置: 絶対;
  右: 0rpx;
  高さ: 100%;
 
}
.hbMpBox_r .hbMpBox_r_r2 .hbMpBox_r_r2_in{
  高さ: 54rpx;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  パディング: 0rpx 10rpx;
  行の高さ: 54rpx;
}
.hbMpBox_r .hbMpBox_r_r2 .hbMpBox_r_r2_in1{
  背景: #d13d4b;
  色: #fff;
}
.hbMpBox_r .hbMpBox_r_r2 .hbMpBox_r_r2_in2{
  色: #d13d4b;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_time{
  上マージン: 15rpx;
  フォントサイズ: 24rpx;
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
}
 
.syTime_time{
  パディング: 3rpx 6rpx;
  背景: #444;
  テキスト配置: 中央;
  色: #fff;
  境界線の半径: 5rpx;
  マージン: 0rpx 5rpx;
}
.hbMpBox .hbMpBox_r .hbMpBox_r_price{
  上マージン: 20rpx;
  ディスプレイ: フレックス;
  コンテンツの両端揃え: スペースの間;
  アイテムの位置を中央揃えにします。
}
.hbMpBox .hbMpBox_r .hbMpBox_r_price .hbMpBox_r_price_r{
  背景: #d13d4b;
  色: #fff;
  幅: 150rpx;
  高さ: 50rpx;
  行の高さ: 50rpx;
  テキスト配置: 中央;
  境界線の半径: 5rpx;
}
.indexMptxBox{
  パディング: 20rpx;
  テキスト配置: 中央;
  フォントサイズ: 24rpx;
}

JS コード (バックグラウンド データ クエリを取得し、FIND メソッドを使用してフィールドを挿入します。直接トラバーサルを行うと問題が発生します)

mpThing.find(関数(v){
        var aa = v.goods_time;
        var bb = util.dayTimeArr(aa);
        v.商品時間 = bb
        that.setData({
         mpシング:mpシング,
        })
        var ref = setInterval(関数(){
          ああ――
          var timeArr = util.dayTimeArr(aa);
          v.goods_time = 時間Arr
          that.setData({
           mpシング:mpシング,
          })
        },1000);
})

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChat アプレットカウントダウンコンポーネント実装コード
  • WeChatアプレットはプロジェクトのカウントダウン効果を動的に表示します
  • WeChat アプレットのカウントダウン機能のサンプルコード
  • WeChatアプレット:SMS送信のカウントダウン機能
  • js カウントダウン アプレット
  • WeChatアプレットが注文カウントダウンを実装
  • WeChatアプレット登録60秒カウントダウン機能はJSを使用して登録60秒カウントダウン機能を実装します
  • WeChatアプレットは認証コードを取得するための60秒のカウントダウンを実装
  • WeChatアプレットは日付のフォーマットとカウントダウンを実装
  • WeChatアプレットカウントダウン機能実装コード

<<:  Linux で pip 操作中にタイムアウトが発生する問題を解決する方法

>>:  mysql エラー 1033 を解決する方法: ファイル内の情報が正しくありません: 'xxx.frm'

推薦する

Apache ab同時負荷ストレステストの実装方法

腹筋コマンドの原則Apache の ab コマンドは、マルチスレッドの同時リクエストをシミュレートし...

MySQL データベース監視ソフトウェア lepus の使用上の問題と解決策

lepus3.7 を使用して MySQL データベースを監視中に、次の問題が発生しました。このブログ...

MySQLデスクトップツールSQLyogのリソースとアクティベーション方法は、白黒のコマンドラインに別れを告げます

では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...

MySQL マルチテーブル結合クエリの詳細な説明

目次複数テーブル結合クエリ内部結合左結合右結合サブクエリ要約する複数テーブル結合クエリテーブル間の接...

VMware vCenter の不正な任意ファイルアップロードの脆弱性 (CVE-2021-21972) について

背景CVE-2021-21972 VMware vCenter における認証されていないコマンド実行...

XHTML 入門チュートリアル: よく使われる XHTML タグ

<br />記事と同様に、Web ページにも明確な段落と重要度の異なるタイトルが必要です...

オブジェクトアニメーションによってブロックされずにオブジェクトに div を表示する方法

今日はメニューボタンを作りました。マウスをボタンに移動するすると、ドロップダウンサブメニューが表示さ...

JavaScript は大容量ファイルのアップロード処理を実装します

数十 MB 程度の小さいものから 1G 以上の大きいものまで、ビデオ ファイルなどのファイルのアップ...

nginxフォワードプロキシとリバースプロキシの詳細な説明

目次フォワードプロキシnginx リバースプロキシnginx リバースプロキシ 02リバースプロキシ...

mysql 行列変換サンプルコード

1. 需要3 つのテーブルがあります。一定期間にわたるさまざまな抗生物質感受性の結果、つまり rep...

ミニプログラムはリストのカウントダウン機能を実装します

この記事の例では、ミニプログラムでリストカウントダウンを実装するための具体的なコードを参考までに共有...

meta name="" content="の機能の詳細な説明

1. 文法: <meta name="名前" content="...

HTML はモバイル上で固定フローティング半透明検索ボックスを実装します

質問。モバイルショッピングモールシステムでは、ページの上部に検索ボックスがよく見られます。ブロガーは...

JavaScriptオブジェクト指向について学ぼう

目次JavaScript プロトタイプチェーンオブジェクトプロトタイプトップレベルのプロトタイプOb...

jQueryは画像の強調表示を実現します

ページ上の画像を強調表示することは非常に一般的です。ここでは、jQuery を使用して画像を強調表示...