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

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

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

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

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 の解凍バージョンをインストールして構成する方法 (グラフィック チュートリアル付き)

推薦する

無効にしてHTMLフォーム入力を送信した後にフォーム値が取得されない問題を解決する方法

フォーム入力ボックスの入力をdisable属性に設定して送信すると、入力ボックスの値を取得できなくな...

UTF-8 ファイルの Unicode 署名 BOM (バイト オーダー マーク) の問題

最近、UTF8 エンコードの中国語 Zen Cart Web サイトをデバッグしているときに奇妙な現...

HTML ベースタグ target=_parent の使用の紹介

<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトのタ...

CSS 属性値正規マッチングセレクターの使い方 (ヒント)

属性値の正規一致セレクターには 3 つの種類があります。 [属性^="値"] [...

Linux での Redis の永続性、マスター スレーブ同期、Sentinel の詳細な説明

1.0 Redis の永続性Redis はメモリ内データベースです。サーバー プロセスが終了すると、...

入力ファイルのカスタムボタンの美化(デモ)

以前にも同じような記事を書いたことがありますが、js スクリプトを使用しており、ファイルパスを表示で...

MySQL が自動的に再起動する問題の解決方法

序文最近、テスト環境で MySQL データベースが自動的に再起動し続ける問題が発生しました。原因は、...

MySql ビュー、トリガー、ストアド プロシージャに関する簡単な説明

ビュービューとは何ですか?ビューの役割は何ですか?ビューは仮想テーブルであり、データ自体を含まない論...

CSS でのフィルタープロパティの使用に関する詳細な説明

フィルター属性は要素の視覚効果を定義しますぼかし画像にガウスぼかしを適用します。 「半径」の値は、ガ...

JS クロスドメイン XML - AS URLLoader を使用

最近、機能拡張の要件を受け取りました。ただし、新しい要件で参照されているデータインターフェイスは、X...

Vueは小さなカウントダウン機能を実装します

多くのプロジェクトでは、検証コードの送信など、カウントダウン機能を実装する必要があります。ここで、簡...

Dockerのインストール方法とDockerの4つのネットワークモードの詳細説明

1. Dockerをインストールするyum -y install docker-ioインストールが完...

WindowsとLinux間でファイルを転送する方法

WindowsとLinux間のファイル転送(1)WinSCPを使用して、WindowsファイルをLi...

CentOS 6.5 に MySQL 5.6 をインストールするチュートリアル

1. Linuxに対応するRPMパッケージをダウンロードする5.6 より前のバージョンhttp://...

HTML に基づいてページを更新せずにフォーム送信を実装する

ページを更新せずにフォーム送信を実装するために Ajax を使用することは、プロジェクトでよく使用さ...