WeChatアプレットが複数行テキストのスクロール効果を実現

WeChatアプレットが複数行テキストのスクロール効果を実現

この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

wxml

<view class="full" style="height:100%;overflow:hidden">
   <スワイパー 自動再生="true" 間隔="3000" 継続時間="500" 円形="true" 垂直方向="true" スタイル="高さ:100%">
    <スワイパーアイテム wx:for="{{topnewslist}}" wx:key="{{index}}" catchtouchmove='catchTouchMove'>
     <van-notice-bar scrollable="{{false}}" bindtap="tonewsdetail" wx:for="{{item}}" wx:for-item="it" wx:key="{{index}}" data-newsid="{{it.new_id}}" style="width:100%" text="{{it.new_topic}}" />
    </スワイパーアイテム>
   </スワイパー>
</ビュー>

wxss

スワイパーアイテム{
 高さ: 100%;
}

js

//index.js
// "../../utils/api.js" からアプリケーション インスタンスのインポート API を取得します。
var トークン = ''
const アプリ = getApp()

ページ({
 データ: {
  トップニュースリスト:[]
 },
 onLoad: 関数 () {
 },
 ニュース詳細(e){
  var newsid=e.currentTarget.dataset.newsid;
  wx.navigateTo({
   url: '/pages/newsdetail/newsdetail?newsid='+newsid,
  })
 },

 スクロールニュースを読み込む(){
  api.get("mpapi/mpmnews.ashx", { アクション:'toplist', トークン: token}).then((res)=>{
   (res.code==1)の場合{
   //res.list=[{"new_id":1,"new_topic":"111"},{"new_id":2,"new_topic":"222"},{"new_id":3,"new_topic":"333"},{"new_id":4,"new_topic":"444"}]
    this.setData({
     topnewslist: this.splitArr(res.list, 2) //呼び出し//呼び出し後 [[{"new_id":1,"new_topic":"111"},{"new_id":2,"new_topic":"222"}],[{"new_id":3,"new_topic":"333"},{"new_id":4,"new_topic":"444"}]]
    })
   }
  })
 },
 /**
  * 配列を分割して2次元配列パッケージを作成します * @param data array * @param senArrLen 分割するサブ配列の長さ */
 splitArr(データ、senArrLen){
  // データを len のグループに処理します。let data_len = data.length;
  arrOuter_len = data_len とします。% senArrLen === 0 ? data_len / senArrLen : parseInt((data_len / senArrLen) + '') + 1;
  let arrSec_len = data_len > senArrLen ? senArrLen : data_len; // 内側の配列の長さ let arrOuter = new Array(arrOuter_len); // 最も外側の配列 let arrOuter_index = 0; // 外側の配列のサブ要素のインデックス // console.log(data_len % len);
  (i = 0; i < data_len; i++) の場合 {
   if (i % senArrLen === 0) {
    arrOuter_index++;
    len = arrSec_len * arrOuter_indexとします。
    // 内部配列の最小長は、データ長と len の剰余によって決まります。通常、最も内側の層は次の代入によって決定されます。arrOuter[arrOuter_index - 1] = new Array(data_len % senArrLen);
    if (arrOuter_index === arrOuter_len) //data_len の最後のグループ % senArrLen === 0 ?
      len = data_len % senArrLen + senArrLen * arrOuter_index :
      len = data_len % senArrLen + senArrLen * (arrOuter_index - 1);
    let arrSec_index = 0; // 2 番目のレイヤー配列のインデックス for (let k = i; k < len; k++) { // 最初のレイヤー配列の開始は、2 番目のレイヤー配列の長さ * 現在の最初のレイヤーのインデックスによって決まります arrOuter[arrOuter_index - 1][arrSec_index] = data[k];
     arrSec_index++;
    }
   }
  }
  戻り値 arrOuter
 },
 //垂直スライドをインターセプトする catchTouchMove: function (res) {
  偽を返す
 },
})

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

以下もご興味があるかもしれません:
  • WeChatアプレットのスクロールビューの非表示のスクロールバーの詳細な説明
  • WeChatアプレットのスクロールビューでスクロールの浸透を実装し、スクロールを防止する方法
  • WeChatアプレットのスクロールビューの水平スクロールの実際的な落とし穴とスクロールバーを非表示にする実装の詳細な説明
  • WeChatアプレット上部のスクロール可能なナビゲーション効果
  • WeChatアプレットのスクロールビューコンポーネントはスクロールアニメーションを実装します
  • WeChat アプレット - スクロールメッセージ通知のサンプルコード
  • WeChatアプレットのスクロールタブで左右のスライド切り替えを実現
  • WeChatアプレットがテキストスクロールを実装
  • WeChatアプレットは水平および垂直スクロールを実現
  • WeChatミニプログラムがシームレスなスクロールを実現

<<:  指定したディレクトリに nginx をインストールする方法の例

>>:  MySQLは重複しないデータ挿入を実装するためにUNIQUEを使用する

推薦する

Ubuntu 20.04 に Python 3 仮想環境をインストールする詳細なチュートリアル

以下はすべて仮想マシン上で実行されます1. pip3をインストールするsudo apt で pyth...

echarts と vue.js を統合する際に発生するいくつかの問題の概要

序文現在、私は Beetlex のデータ分析プラットフォームに取り組んでいます。この製品の開発では、...

ウェブページ作成における絶対パスと相対パスの違い

1. 絶対パスまず、ローカル コンピューターでは、ファイルの絶対パスは、当然、ハード ディスク上でフ...

Linux での wget コマンドの基本的な使い方

目次序文1. wgetを使用して単一のファイルをダウンロードする2. wget -Oを使用してダウン...

MySQL の concat 関数についての簡単な説明。MySQL でフィールドの前または後に文字列を追加する方法

MySQL で concat 関数を使用する方法: CONCAT(文字列1、文字列2、…)戻り値は、...

Ubuntuはカーネルモジュールをコンパイルし、その内容はシステムログに反映されます。

目次1.Linuxログインインターフェース2. コードを書く3. Makefileを書く4. コンパ...

Vue.js での VNode の使用

VNodeとはvue.js には VNode クラスがあり、これを使用してさまざまな種類の vnod...

InnoDB のアーキテクチャと機能の詳細な説明 (InnoDB ストレージ エンジンの読書メモの要約)

背景スレッド•マスタースレッドコア バックグラウンド スレッドは主に、バッファー プール データをデ...

Tencent Cloud Serverをゼロから導入する方法

初めての投稿ですので、間違いや問題点などありましたら、コメント欄で指摘していただければ、今後改善させ...

CSS 等高レイアウトの一般的な方法

等高レイアウト同じ親コンテナー内の同じ高さの子要素のレイアウトを指します。等高レイアウトの実装の観点...

HTML テーブル マークアップ チュートリアル (38): ヘッダーの境界線の色属性 BORDERCOLOR

テーブルを美しくするために、ヘッダーに異なる境界線の色を設定できます。基本的な構文<TH 境界...

MySQL の複数テーブル関連付け 1 対多クエリを使用して最新のデータを取得する方法の例

この記事では、MySQL で複数のテーブルを使用して 1 対多のクエリを使用して最新のデータを取得す...

自己終了XHTMLタグを書くときに注意すべきこと

XHTMLの img タグは、次のように記述する必要があります: <img alt="...

ネイティブ js カスタム右クリック メニュー

この記事の例では、参考のためにjsカスタム右クリックメニューの具体的なコードを共有しています。具体的...

Vueはログインタイプの切り替えを実装します

この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...