WeChatミニプログラムがシームレスなスクロールを実現

WeChatミニプログラムがシームレスなスクロールを実現

この記事の例では、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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットはシンプルな計算機を実装する
  • WeChatアプレット+mqtt、esp8266温度と湿度の読み取り実装方法
  • WeChat アプレットのカスタム スクロール ビューのサンプル コード
  • 回転灯効果を実現するWeChatアプレットの例
  • マインスイーパゲームを記録するプロセス全体を実現するC言語
  • Java のシンプルなゲーム制作コード
  • js でパズルゲームを実装する
  • C# でシンプルなフライングチェスゲームを実装する
  • Linux 上で C 言語でスネーク ゲームを実装する
  • CocosCreatorでWeChatゲームを作成する方法

<<:  Linuxカーネルのアクセス制御セキュリティを強化する方法

>>:  MySQLで全角文字と半角文字を保存する場合の違い

推薦する

vue3 のさまざまなファイルタイプのプレビュー機能の例

目次序文1. オフィス文書の種類のプレビュー2. PDF形式のプレビュー3. 画像の種類4. ビデオ...

MySQLデータベースのトランザクション分離レベルの詳細な説明

データベーストランザクション分離レベルデータベース トランザクションには、低から高まで 4 つの分離...

Linux 3.X/4.x/5.x でパゴダ パネルのパスワードを忘れた場合の解決方法

ssh に入り、次のコマンドを入力してパスワードをリセットします (コマンドの末尾の「testpas...

JavaScript におけるさまざまなバイナリオブジェクトの関係の詳細な説明

目次序文さまざまなオブジェクト間の関係配列バッファ型付き配列Uint8ClampedArray文字間...

Nginx リバース プロキシを使用してクロスドメイン問題を解決する方法の詳細な説明

質問前回のクロスドメイン リソース共有に関する記事では、ドメイン間で Cookie を送信する場合、...

Nginx アクセス ログとエラー ログ パラメータの説明

例: nginx ログには、アクセス ログとエラー ログの 2 つの主な種類があります。アクセス ロ...

jsはショッピングカートの加算と減算、価格計算を実装します

この記事の例では、ショッピングカートの加算と減算、価格計算を実装するためのjsの具体的なコードを共有...

MySQL の group by と order by を一緒に使用する方法

テーブル:reward(報酬テーブル)があるとします。テーブル構造は次のようになります。 テーブルt...

Linux の Makefile とは何ですか? どのように機能しますか?

この便利なツールでプログラムをより効率的に実行およびコンパイルしますMakefile は自動コンパイ...

Nginx 仮想ホストの詳細な分析

目次1. 仮想ホスト1.1 仮想ホストの概念1.2 仮想ホストタイプ2. IP仮想ホストに基づく2....

Linux環境でrmによって誤って削除されたファイルを回復する方法

目次序文RMの後には希望はあるのでしょうか?最前線を使ってファイルを取得するextundeleteを...

MySQL 8.0.11 MSI バージョンのインストールと構成のグラフィック チュートリアル

この記事では、MySQL 8.0.11 MSIバージョンのインストールと設定のチュートリアルを参考ま...

Navicatを使用してクラウドサーバーデータベースにリモート接続する方法

秘密鍵を開かずにリモート サーバーのデータベースに接続するのは非常に便利です。新しい接続でデータを入...

最も完全なpackage.json分析

目次1. 概要2. 名前フィールド3. バージョンフィールド4. 説明フィールド5. キーワードフィ...

30分でReact Hooksを包括的に理解できます

目次概要1. 使用状態1.1 3つの概念に関する質問1.2 例1.3 注記2. リデューサーを使用す...