この記事の例では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 指定したディレクトリに nginx をインストールする方法の例
>>: MySQLは重複しないデータ挿入を実装するためにUNIQUEを使用する
序文MySQL は最も人気のあるリレーショナル データベース管理システムです。WEB アプリケーショ...
最近、「フットボール ナビゲーション」Web サイトに取り組んでいるときに、上部の固定ナビゲーション...
フォーム要素はたくさんあります。簡単にまとめると、次のようになります。私のやり方では、主にテキスト ...
ローカル環境はWindows10+WSL2(Ubuntu)です。サーバーにDockerをインストール...
この記事では、MySQL インストールの詳細なチュートリアルを記録し、全員と共有します。 1. バー...
bash を終了する場合は、次の 2 つのオプションがあります。最初のもの: Ctrl + d を押...
目次概要コールバックまたは高階関数とは何ですか?コールバック関数はどのように機能しますか?コールバッ...
1. カスタムフックとは何かロジックの再利用簡単に言えば、カスタム フックを使用すると、特定のコンポ...
目次問題の説明MySQLオンラインDDLで列を追加する従来の方法01 コピー方法02 インプレースメ...
この記事では、WeChatミニプログラムのビデオ弾幕の位置をランダム化するための具体的なコードを紹介...
<br />何の警告もなく、cnBeta で TOM.COM の Web サイトが再設計...
XPath は、XML ドキュメントの一部を選択するための言語です。 XPath は、XSLT、XQ...
目次背景問題の説明原因分析CPUクエリが遅い接続数分析する拡大する総括する背景新年を迎える前は、一年...
目次前提条件DNSドメイン名解決プロセス外部ネットワークマッピングnginxコア知識nginxとはア...
この記事では、カレンダー効果を実現するためのBootstrap+Jqueryの具体的なコードを参考ま...