この記事の例では、WeChatアプレットのシームレスなスクロールを実現するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 wxml <view class="wrap-item" style='transform:translateX({{posLeft2}}px)'> <view class="messages-scroll firstScroll"> <view class="{{index == 0?'yanse items':'items'}}" wx:for="{{zhuli}}" wx:key="index"> <画像 wx:if="{{index == 0}}" src="../../images/xiangq_yonhu_icon_p.png"></画像> <画像 wx:if="{{index != 0}}" src="../../images/xiangq_yonhu_icon_n.png"></画像> <view>{{index}}{{item.ip}}{{item.str}}</view> </ビュー> </ビュー> <view class="messages-scroll secondScroll" style='transform:translateX({{marginLeft}}px)'> <view class="{{index == 0?'yanse items':'items'}}" wx:for="{{zhuli}}" wx:key="index"> <画像 wx:if="{{index == 0}}" src="../../images/xiangq_yonhu_icon_p.png"></画像> <画像 wx:if="{{index != 0}}" src="../../images/xiangq_yonhu_icon_n.png"></画像> <view>{{item.ip}}{{item.str}}</view> </ビュー> </ビュー> </ビュー> JS onShow(){ let windowWidth = wx.getSystemInfoSync().windowWidth; //画面の幅 wx.createSelectorQuery().select('.firstScroll').boundingClientRect(function (rect) { let txtLength = rect.width; //テキスト + アイコンの長さ console.log(txtLength) コンソール.log(矩形) // that.setData({ // marginLeft: txtLength < windowWidth - that.data.marginLeft ? windowWidth - txtLength : that.data.marginLeft // }) console.log(that.data.marginLeft) that.roll2(that, txtLength, windowWidth); //スクロールメソッドを呼び出す}).exec() }, roll2: 関数 (that, txtLength, windowWidth) { var interval2 = setInterval(関数() { if (-that.data.posLeft2 < txtLength) { that.setData({ posLeft2: that.data.posLeft2 - that.data.pace }) } else { // 2番目の段落は左にスクロールし、その後再びスクロールします that.setData({ 左位置2: 0 }) 間隔をクリアします(間隔2); that.roll2(that、txtLength、windowWidth); } }, 20) }, 色: .wrap-item{ 位置: 相対的; zインデックス: 10; ディスプレイ: フレックス; 空白: ラップなし; } .ブランド情報 .メッセージスクロール { ディスプレイ: フレックス; 空白: ラップなし; 上マージン: 148rpx; } .brand-info .messages-scroll .items { ディスプレイ: フレックス; 空白: ラップなし; ボックスのサイズ: 境界線ボックス; パディング: 0 10rpx; 左マージン: 10rpx; アイテムの位置を中央揃えにします。 /* 幅: 332rpx; */ 高さ: 50rpx; 背景: rgba(0, 0, 0, 0.2); 境界線の半径: 25rpx; 色: #99A4BA; } .yanse{ 色: #C4FFFD !重要; } .brand-info .messages-scroll .items 画像 { 幅: 26rpx; 高さ: 22rpx; 右マージン: 10rpx; } .brand-info .messages-scroll .items ビュー { フォントサイズ: 24rpx; フォントファミリー: Source Han Sans CN; フォントの太さ: 400; } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linuxカーネルのアクセス制御セキュリティを強化する方法
目次序文1. オフィス文書の種類のプレビュー2. PDF形式のプレビュー3. 画像の種類4. ビデオ...
データベーストランザクション分離レベルデータベース トランザクションには、低から高まで 4 つの分離...
ssh に入り、次のコマンドを入力してパスワードをリセットします (コマンドの末尾の「testpas...
目次序文さまざまなオブジェクト間の関係配列バッファ型付き配列Uint8ClampedArray文字間...
質問前回のクロスドメイン リソース共有に関する記事では、ドメイン間で Cookie を送信する場合、...
例: nginx ログには、アクセス ログとエラー ログの 2 つの主な種類があります。アクセス ロ...
この記事の例では、ショッピングカートの加算と減算、価格計算を実装するためのjsの具体的なコードを共有...
テーブル:reward(報酬テーブル)があるとします。テーブル構造は次のようになります。 テーブルt...
この便利なツールでプログラムをより効率的に実行およびコンパイルしますMakefile は自動コンパイ...
目次1. 仮想ホスト1.1 仮想ホストの概念1.2 仮想ホストタイプ2. IP仮想ホストに基づく2....
目次序文RMの後には希望はあるのでしょうか?最前線を使ってファイルを取得するextundeleteを...
この記事では、MySQL 8.0.11 MSIバージョンのインストールと設定のチュートリアルを参考ま...
秘密鍵を開かずにリモート サーバーのデータベースに接続するのは非常に便利です。新しい接続でデータを入...
目次1. 概要2. 名前フィールド3. バージョンフィールド4. 説明フィールド5. キーワードフィ...
目次概要1. 使用状態1.1 3つの概念に関する質問1.2 例1.3 注記2. リデューサーを使用す...