WeChat Mini 프로그램 예시: 상세 페이지 데이터의 동적 구현 방법 소개-미니 프로그램 개발-php.cn

WeChat Mini 프로그램 예시: 상세 페이지 데이터의 동적 구현 방법 소개

不言

풀어 주다： 2018-09-04 16:50:40

원래의

6785명이 탐색했습니다.

이 기사는 WeChat 애플릿의 예를 제공합니다: 세부 정보 페이지에 데이터를 동적으로 표시하는 방법에 대한 소개입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이전 기사WeChat 미니 프로그램 예: 세부정보를 위한 정적 페이지 구축 방법 정적 세부정보 페이지를 소개합니다. 이제 동적으로 데이터를 입력해 보겠습니다. detail页面做好了,现在来做把数据动态的放进去
首先实现点击list页面会跳转到detail页面
给list页面中添加点击事件
WeChat Mini 프로그램 예시: 상세 페이지 데이터의 동적 구현 방법 소개
list.js

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

로그인 후 복사

上面console.log(event)的内容如下:
WeChat Mini 프로그램 예시: 상세 페이지 데이터의 동적 구현 방법 소개
这样我们就把点击跳转的下标拿到并传递给detail页面了
在detail.js中获取数据,获取数据要记得先把数据引进来:

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

로그인 후 복사

然后在detail.wxml먼저 클릭 구현 목록 페이지는 세부정보 페이지로 이동합니다

목록 페이지에 클릭 이벤트를 추가하세요

여기에 그림 설명 쓰기

목록. js

<!--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>

로그인 후 복사

위 console.log(event) 내용은 다음과 같습니다. 여기에 그림 설명 쓰기