この記事の例では、ミニプログラムでリストカウントダウンを実装するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 効果 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で pip 操作中にタイムアウトが発生する問題を解決する方法
>>: mysql エラー 1033 を解決する方法: ファイル内の情報が正しくありません: 'xxx.frm'
腹筋コマンドの原則Apache の ab コマンドは、マルチスレッドの同時リクエストをシミュレートし...
lepus3.7 を使用して MySQL データベースを監視中に、次の問題が発生しました。このブログ...
では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...
目次複数テーブル結合クエリ内部結合左結合右結合サブクエリ要約する複数テーブル結合クエリテーブル間の接...
背景CVE-2021-21972 VMware vCenter における認証されていないコマンド実行...
<br />記事と同様に、Web ページにも明確な段落と重要度の異なるタイトルが必要です...
今日はメニューボタンを作りました。マウスをボタンに移動するすると、ドロップダウンサブメニューが表示さ...
数十 MB 程度の小さいものから 1G 以上の大きいものまで、ビデオ ファイルなどのファイルのアップ...
目次フォワードプロキシnginx リバースプロキシnginx リバースプロキシ 02リバースプロキシ...
1. 需要3 つのテーブルがあります。一定期間にわたるさまざまな抗生物質感受性の結果、つまり rep...
この記事の例では、ミニプログラムでリストカウントダウンを実装するための具体的なコードを参考までに共有...
1. 文法: <meta name="名前" content="...
質問。モバイルショッピングモールシステムでは、ページの上部に検索ボックスがよく見られます。ブロガーは...
目次JavaScript プロトタイプチェーンオブジェクトプロトタイプトップレベルのプロトタイプOb...
ページ上の画像を強調表示することは非常に一般的です。ここでは、jQuery を使用して画像を強調表示...