主要功能流程介紹

循環獲取列表數據

點擊列表數據進入詳情頁

點擊報名參加彈出報名成功提示框

點擊提示框中的確定按鈕，跳回列表頁

代碼實現流程和解說

一、列表頁

1、訪問鏈接list.php時判斷是pc端還是客戶端

$user_agent_arr = mall_get_user_agent_arr();if(MALL_UA_IS_PC == 1){  //****************** pc版 ******************  include_once './list-pc.php';}else{  //****************** wap版 ******************  include_once './list-wap.php';} 

2、如果是wap版就跳轉到 list-wap.php 頁面，載入 list.tpl.htm頁面

$pc_wap = 'wap/';$tpl = $my_app_pai->getView(TASK_TEMPLATES_ROOT.$pc_wap.'trade/list.tpl.htm');

3、list.tpl.htm 頁面進行渲染模板

HTML

<div class="page-view " data-role="page-container">    <div class="sales-list-page">      <div id="render-ele"></div>    </div>  </div>

JS

$(function()  // 渲染模塊  {    //請求php的url    var TRADE_AJAX_URL = window.$__ajax_domain + 'get_trade_list.php';    //獲取已經封裝在list.js里面的一個對象list_item_class    var list_item_class = require('../../../../modules/list/list.js');    //獲取模板塊    var template = __inline('./list-item.tmpl');    var list_obj = new list_item_class({      ele : $("#render-ele"),//渲染數據到id為render-ele中      url : TRADE_AJAX_URL,//請求數據連接      template : template //渲染的模板    });  });

list-item.tmpl模板內容（循環的列表內容）

<div class="item-wrap">  {{#each list}}  {{#if is_enroll}}  <a href="./detail.php?topic_id={{id}}&state=is_enter">  {{else}}  <a href="./detail.php?topic_id={{id}}&state=no_enter">  {{/if}}    <div class="item ui-border-b" >      <div class="img-item">        <i class="img" style="background-image: url({{img}});">        </i>      </div>      <div class="text-item">        <div class="txt-con-1">          <h3 class="title f14">{{title}}</h3>          <p class="txt f10 color-999">所屬品類：{{type}}</p>        </div>        <div class="txt-con-2">          <span class="color-333 join-in ">            {{ enroll_text }}           </span>        </div>      </div>    </div>  </a>  {{/each}}</div>