シンプルなリスト機能を実装するミニプログラム

シンプルなリスト機能を実装するミニプログラム

この記事の例では、参考のために簡単なリスト機能を実装するアプレットの具体的なコードを共有しています。具体的な内容は次のとおりです。

リストコンポーネントコンポーネントに配列を追加するだけで、リストコンポーネントを実装できます。

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットでリスト更新を実装する詳細な例
  • WeChatアプレットが都市リストの選択を実装
  • WeChatアプレットリストのプルアップ読み込みとプルダウン更新の実装
  • WeChat アプレットのドロップダウン リストを実装するためのサンプル コード
  • WeChatアプレットは、円形リストにクリックスタイルの例を追加することを実装しています
  • WeChat アプレットのスクロールビュー コンポーネントはリスト ページのサンプル コードを実装します
  • WeChatミニプログラム(VI):プルアップでリストを読み込み、プルダウンでリストを更新する例
  • WeChatアプレットのページジャンプ機能:リスト項目から次のページにジャンプする方法
  • WeChatアプレットはプルダウン更新とリストのプルアップ読み込みを実装
  • WeChatアプレットが無限スクロールリストを実装

<<:  Zookeeperスタンドアロン環境とクラスタ環境の構築

>>:  Windows 10 で MySQL 8.0.12 の解凍バージョンをインストールして構成する方法 (グラフィック チュートリアル付き)

推薦する

3次元画像配置効果を実現する純粋なCSSのサンプルコード

1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...

VMware Workstation Pro 16 ライセンス キーと使用方法のチュートリアル

VMware Workstation は、開発、テスト、デモンストレーション、展開のために仮想マシン...

SQLクエリの実行順序をゼロから学ぶ

SQL クエリ ステートメントの実行順序は次のとおりです。 (7)選択 (8) DISTINCT &...

MacにMySQLをインストールするときに忘れたパスワードを変更する方法

1. MacにMySQLデータベースをインストールする1. MySQLデータベースをダウンロードする...

MySQL マルチマスターと 1 スレーブのデータバックアップ方法のチュートリアル

概要いずれかのデータベースに対する操作は他のデータベースに自動的に適用され、2 つのデータベースのデ...

JavaScript フロントエンドのタイムアウト非同期操作に最適なソリューション

目次コードの実行に長い時間がかかる場合はどうなりますか? Axiosにはタイムアウト処理機能が搭載さ...

Dockerはelasticsearchイメージを起動し、ディレクトリをマウントした後にエラーを解決します

docker hub から es イメージ (バージョン 6.4.2) をダウンロードしました。詳細...

MySql のクラッシュとサービスの起動失敗の解決策

私は長い間PHPに触れてきましたが、インストール環境は非常に不慣れです。多くの問題に遭遇しました。B...

マウスを置いたときに半透明効果のテキスト説明を実現するための純粋な CSS (初心者は必読)

効果は以下のとおりです。 例1 例2:例1[結婚式の計画]を例にとるHTML: <div cl...

星のきらめき効果を実現するネイティブ js

この記事の例では、星のきらめき効果を実現するためのjsの具体的なコードを共有しています。具体的な内容...

Docker のインストールと構成コマンドのコード例

Dockerのインストール依存パッケージをインストールする sudo yum install -y ...

MySQLの共通関数を使用してJSONを処理する方法

公式ドキュメント: JSON 関数名前説明JSON_APPEND() JSONドキュメントにデータを...

mysql update文の実行プロセスの詳細な説明

以前、MySQL クエリ文の実行プロセスについての記事がありました。ここでは、更新文の実行プロセスを...

ドロップダウンリストのJavaScript実装

この記事の例では、ドロップダウンリストを実装するためのJavaScriptの具体的なコードを参考まで...

MySQLはフィールドからカンマ区切りの値を取り出して新しいフィールドを形成します

1例: 図1のフィールドを図2に分割するには アカウントIDを選択、 サブストリングインデックス(サ...