この記事の例では、参考のために簡単なリスト機能を実装するアプレットの具体的なコードを共有しています。具体的な内容は次のとおりです。 リストコンポーネントコンポーネントに配列を追加するだけで、リストコンポーネントを実装できます。 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 の解凍バージョンをインストールして構成する方法 (グラフィック チュートリアル付き)
フォーム入力ボックスの入力をdisable属性に設定して送信すると、入力ボックスの値を取得できなくな...
最近、UTF8 エンコードの中国語 Zen Cart Web サイトをデバッグしているときに奇妙な現...
<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトのタ...
属性値の正規一致セレクターには 3 つの種類があります。 [属性^="値"] [...
1.0 Redis の永続性Redis はメモリ内データベースです。サーバー プロセスが終了すると、...
以前にも同じような記事を書いたことがありますが、js スクリプトを使用しており、ファイルパスを表示で...
序文最近、テスト環境で MySQL データベースが自動的に再起動し続ける問題が発生しました。原因は、...
ビュービューとは何ですか?ビューの役割は何ですか?ビューは仮想テーブルであり、データ自体を含まない論...
フィルター属性は要素の視覚効果を定義しますぼかし画像にガウスぼかしを適用します。 「半径」の値は、ガ...
最近、機能拡張の要件を受け取りました。ただし、新しい要件で参照されているデータインターフェイスは、X...
多くのプロジェクトでは、検証コードの送信など、カウントダウン機能を実装する必要があります。ここで、簡...
1. Dockerをインストールするyum -y install docker-ioインストールが完...
WindowsとLinux間のファイル転送(1)WinSCPを使用して、WindowsファイルをLi...
1. Linuxに対応するRPMパッケージをダウンロードする5.6 より前のバージョンhttp://...
ページを更新せずにフォーム送信を実装するために Ajax を使用することは、プロジェクトでよく使用さ...