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で全角文字と半角文字を保存する場合の違い

推薦する

MySQL クエリのパケットが大きすぎる問題と解決策

問題の説明:エラーメッセージ:原因: com.mysql.jdbc.PacketTooBigExce...

フォーム入力ボックスに関するWebデザインのヒント

1. キャンセル ボタンが押されたときの破線ボックス<br /> 入力に属性値 hide...

Ubuntu は、Mysql+Keepalived の高可用性実装 (デュアルアクティブ ホットスタンバイ) を構築します。

Mysql5.5 デュアルマシン ホットスタンバイ実装 2つのMySQLをインストールするMySQ...

MySQL SELECT文の実行方法

MySQL Select ステートメントはどのように実行されますか?最近、Geek Time で D...

Windows での MySQL 8.0.11 インストール チュートリアル

この記事は、WindowsでのMySQL 8.0.11のインストールチュートリアルを記録しています。...

Dockerを使用してプライベートGitLabを構築する2つの方法

最初の方法: docker インストール1. オープンソース版のイメージを取得する2. 対応するデー...

HTML 初心者のためのベストプラクティス 15 選

HTML 初心者向けのベストプラクティスを 30 個紹介します。 1. タグを閉じたままにする過去に...

@media レスポンシブ CSS を使用してさまざまな画面に適応する例

定義と使用@media クエリを使用すると、さまざまなメディア タイプに異なるスタイルを定義できます...

JS で async と await を使用する方法

目次1. 非同期2. 待つ: 3. 包括的なアプリケーション1. 非同期async 、非同期コードが...

スーパーバイザーウォッチドッグの使い方を3分で学ぶ

ソフトウェアとハ​​ードウェア環境centos7.6.1810 64ビット cat /etc/red...

Vueはシンプルなショッピングカートの例を実装します

この記事では、Vueの具体的なコードを共有して、簡単なショッピングカートを実装します。具体的な内容は...

Linux 継続的インテグレーションで Maven を自動的にインストールする方法

Mavenパッケージを解凍する tar xf apache-maven-3.5.4-bin.tar....

MySQLのMERGEストレージエンジンの詳細な説明

MERGE ストレージ エンジンは、MyISAM テーブルのグループを論理ユニットとして扱い、同時に...

IE6のバグと修正は予防戦略です

元記事:究極の IE6 チートシート: 25 以上の Internet Explorer 6 のバグ...

MySql で、存在しない場合は挿入し、存在する場合は更新する方法

まとめシナリオによっては、レコードがない場合は挿入し、レコードがある場合は更新するという要件がある場...