この記事の例では、参考のために簡単なリスト機能を実装するアプレットの具体的なコードを共有しています。具体的な内容は次のとおりです。 リストコンポーネントコンポーネントに配列を追加するだけで、リストコンポーネントを実装できます。 wxml コード <block wx:for="{{yetinglist}}"> <view class='waibian' bindtap="readDetail" data-id="{{item.title}}"> <image src="{{item.smallLogo}}" class='leftimagecss'></image> <view class='righttextcss'> <text class='titlecss'>【ナイトリスニング】{{item.title}}</text> <text class='nicenamecss'>{{item.nickname}}</text> <ビュークラス='timecss'> <text class='playcunnter'>プレイ時間:{{item.playtimes}}</text> <text class='time'>コレクション:{{item.likes}}</text> </ビュー> </ビュー> </ビュー> </ブロック> index.js コード ページ({ データ: { まだリスト:[], } //リストクリックイベント readDetail: function(e) { //他のページにジャンプ wx.navigateTo({ url: '../twoVC/twovc?id='+e.currentTarget.dataset.id }) // コンソールログ(e.currentTarget.dataset.id); }, //ページの読み込みは1回呼び出されます onLoad: function () { var that =これ; //ネットワーク解析 wx.request({ url:'http://mobile.ximalaya.com/mobile/v1/album/track/ts-1499312754612?albumId=260769&device=iPhone&isAsc=true&pageId=1&pageSize=20&', 成功:function(res) { コンソールログ(res.data.data.list) that.setData({ まだリスト:res.data.data.list、 }) } }) } }) wxxml コード .ワイビアン{ display: -webkit-flex; /* Safari */ -webkit-justify-content: initial; /* Safari 6.1+ */ ディスプレイ: フレックス; コンテンツの正当化: 初期; } .leftimagecss{ 左マージン: 5px; 上マージン: 5px; 下部マージン: 5px; 幅:40%; 高さ:110ピクセル; 境界線の半径:10px; } .righttextcss{ 左マージン: 10px; 高さ: 110px; 幅: 70%; flex-wrap: ラップ; ディスプレイ: フレックス; align-content: スペースを空ける; } .titlecss{ 高さ: 40px; 幅: 100%; 上マージン: 5px; フォントサイズ:中; テキストオーバーフロー: -o-ellipsis-lastline; オーバーフロー: 非表示; テキストオーバーフロー: 省略記号; ディスプレイ: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: 垂直; } .nicenamecss{ 幅: 100%; 高さ: 30px; フォントサイズ:小さい; -webkit-テキストの塗りつぶし色: ライトグレー; } .timecss{ 高さ: 20px; 幅: 100%; ディスプレイ: フレックス; コンテンツの両端揃え: スペースの間; } .playcunnter{ フォントサイズ:小さい; -webkit-テキスト塗りつぶし色: 青紫; } 。時間{ 右マージン: 10px; フォントサイズ:小さい; -webkit-text-fill-color: 芝生の緑; } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Zookeeperスタンドアロン環境とクラスタ環境の構築
>>: Windows 10 で MySQL 8.0.12 の解凍バージョンをインストールして構成する方法 (グラフィック チュートリアル付き)
1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...
VMware Workstation は、開発、テスト、デモンストレーション、展開のために仮想マシン...
SQL クエリ ステートメントの実行順序は次のとおりです。 (7)選択 (8) DISTINCT &...
1. MacにMySQLデータベースをインストールする1. MySQLデータベースをダウンロードする...
概要いずれかのデータベースに対する操作は他のデータベースに自動的に適用され、2 つのデータベースのデ...
目次コードの実行に長い時間がかかる場合はどうなりますか? Axiosにはタイムアウト処理機能が搭載さ...
docker hub から es イメージ (バージョン 6.4.2) をダウンロードしました。詳細...
私は長い間PHPに触れてきましたが、インストール環境は非常に不慣れです。多くの問題に遭遇しました。B...
効果は以下のとおりです。 例1 例2:例1[結婚式の計画]を例にとるHTML: <div cl...
この記事の例では、星のきらめき効果を実現するためのjsの具体的なコードを共有しています。具体的な内容...
Dockerのインストール依存パッケージをインストールする sudo yum install -y ...
公式ドキュメント: JSON 関数名前説明JSON_APPEND() JSONドキュメントにデータを...
以前、MySQL クエリ文の実行プロセスについての記事がありました。ここでは、更新文の実行プロセスを...
この記事の例では、ドロップダウンリストを実装するためのJavaScriptの具体的なコードを参考まで...
1例: 図1のフィールドを図2に分割するには アカウントIDを選択、 サブストリングインデックス(サ...