Beispiel für ein WeChat Mini-Programm: Einführung in die Methode der dynamischen Implementierung von Detailseitendaten

Dieser Artikel bietet Ihnen ein Beispiel für ein WeChat-Applet: eine Einführung in die Methode der dynamischen Anzeige von Daten auf der Detailseite. Ich hoffe, dass es hilfreich ist Du.

Vorheriger ArtikelBeispiel für das WeChat Mini-Programm: So erstellen Sie eine statische Seite für die DetailseiteEinführung: Die statische detail Seite ist fertig, jetzt fügen wir die Daten dynamisch ein
Klicken Sie zunächst auf die Seite list und es wird zur Seite detail gesprungen
Ein Klickereignis zur Seite list hinzufügen

list.js

//点击跳转到detail页面
  toDetail(event){    
  // console.log(event);
   //获取点击跳转对应的下标
    let index = event.currentTarget.dataset.index
    wx.navigateTo({
      url: '/pages/detail/detail?index='+index,
    })
  },

oben lautet wie folgt: console.log(event)
Auf diese Weise erhalten wir den Index des Klicksprungs und übergeben ihn an die Seite
. Holen Sie sich die Daten detail. Denken Sie daran, die Daten zuerst einzugeben:

// pages/detail/detail.js
let datas = require('../../datas/list-data.js');
Page({  
/**
* 页面的初始数据
*/
  data: {
    detailObj:{},
    index:null
  }, 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let index=options.index;    
    this.setData({      
    //把引入的数据根据下标对应放到detailObj中
      detailObj:datas.list_data[index],      
      //index也存放起来
      index:index
    })
  },

detail.js und dann in

<!--pages/detail/detail.wxml--><view class=&#39;detailContainer&#39;>
  <image class=&#39;headImg&#39; src=&#39;{{detailObj.detail_img}}&#39;></image>
  <view class=&#39;avatar_date&#39;>
    <image src=&#39;{{detailObj.avatar}}&#39;></image>
    <text>{{detailObj.author}}</text>
    <text>发布于</text>
    <text>{{detailObj.date}}</text>
  </view>
  <text class=&#39;company&#39;>{{detailObj.title}}</text>
  <view class=&#39;collection_share_container&#39;>
    <view class=&#39;collection_share&#39;>
      <image src=&#39;/images/icon/collection-anti.png&#39;></image>
      <image src=&#39;/images/icon/share-anti.png&#39;></image>
    </view>
    <view class=&#39;line&#39;></view>
  </view>
  <button>转发此文章</button>
  <text class=&#39;content&#39;>{{detailObj.detail_content}}</text></view>

detail.wxml anzuzeigen. Verwandte Empfehlungen:

WeChat-Applet zum dynamischen Festlegen des Seitentitels. Methodenfreigabe

WeChat Mini-Programm-Datenzugriffsbeispiele, detaillierte Erläuterung

Das obige ist der detaillierte Inhalt vonBeispiel für ein WeChat Mini-Programm: Einführung in die Methode der dynamischen Implementierung von Detailseitendaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!