小程式學習筆記(6)-菜譜小程式的製作
對應的git地址:https://gitee.com/ling-xu/wx-1-hash-menu
一,底部導航標籤設計
第一步:素材和頁面準備:
將所需要的圖片素材放置到pages資料夾下,然後在app.json中設定五個頁面,把兩個舊的頁面刪除,設定標題欄樣式:
圖片素材我放這裡:
連結:https://pan.baidu.com/s/1M9NTIP0_o3sp_EA1aelpTw
提取碼:a8a7
第二步:設定底部導航標籤
二,宮格導航的設計
三,自定義資料
模擬來自伺服器的資料:在cook.js檔案中:
利用onload生命週期函式,在頁面的第一次載入時初始化資料:
這裡建立了一個陣列,裡面有5個物件
data:{
array:[]
},
onLoad:function(options){
var array = this.initData();
this.setData({array:array});
},
initData:function(){
var array = [];
var object1 = new Object();
object1.img = '../images/list/food-1.jpg';
object1.title='愛心早餐';
object1.type='健康養生';
object1.liulan='20696瀏覽';
object1.pinglun='7評論';
array[0] = object1;
var object2 = new Object();
object2.img = '../images/list/food-2.jpg';
object2.title='困了只想喝咖啡';
object2.type='家庭醫生線上';
object2.liulan='29628瀏覽';
object2.pinglun='13評論';
array[1] = object2;
var object3 = new Object();
object3.img = '../images/list/food-3.jpg';
object3.title='橘子吃多變小黃人';
object3.type='家庭醫生線上';
object3.liulan='19585瀏覽';
object3.pinglun='6評論';
array[2] = object3;
var object4 = new Object();
object4.img = '../images/list/food-4.jpg';
object4.title='搜狐新聞,手機用久了';
object4.type='廣告';
object4.liulan='4688瀏覽';
object4.pinglun='4評論';
array[3] = object4;
var object5 = new Object();
object5.img = '../images/list/food-5.jpg';
object5.title='困了只想喝咖啡';
object5.type='家庭醫生線上';
object5.liulan='29628瀏覽';
object5.pinglun='13評論';
array[4] = object5;
return array;
},
四,由自定義的資料進行列表渲染
現在進行列表的渲染,其實和vue的列表渲染差不多的
五,將這個列表渲染製作成模板
相關文章
- 微信小程式學習筆記微信小程式筆記
- 小程式學習筆記(未完待續)筆記
- 微信小程式入門學習筆記微信小程式筆記
- 微信小程式開發學習筆記[4]微信小程式筆記
- 微信小程式開發學習筆記[2]微信小程式筆記
- 微信小程式開發學習筆記[3]微信小程式筆記
- 微信小程式--學習筆記(思維導圖)微信小程式筆記
- 花店小程式:如何開通製作鮮花店的微信小程式?微信小程式
- 學習es6小記
- 微信抽獎小程式如何製作?教你快速製作微信公眾號抽獎小程式!
- 提升小波的學習筆記筆記
- 微信小程式學習微信小程式
- 小程式學習整理
- 小程式開發筆記筆記
- 微信小程式-從零開始製作一個跑步微信小程式微信小程式
- react小書學習筆記React筆記
- Activiti 學習筆記 小結筆記
- nginx學習筆記(6):程式模型的設計Nginx筆記模型
- 小程式開發製作公司哪家好
- 用wxDraw.js製作酷炫的小程式canvas動畫『wxDraw 小程式界的zrender』JSCanvas動畫
- 微信小程式Renard學習微信小程式
- 小程式學習總結
- 小魚JCL學習筆記(一)筆記
- 我是如何學習小程式的
- 《可複製的領導力》【學習小記】
- xv6學習筆記(4) : 程式排程筆記
- springMVC學習筆記(二)-----註解和非註解入門小程式SpringMVC筆記
- 微信小程式學習網站微信小程式學習網站
- 作業系統學習筆記之初識程式和程式控制作業系統筆記
- 小程式視訊專案筆記筆記
- 天氣小程式筆記總結筆記
- 鳥哥私房菜-基礎篇小筆記筆記
- 小程式複製功能
- 【讀書筆記+小練習(答案已經更新)】作業系統——程式及其實現筆記作業系統
- 彙編學習小記(二)-順序程式設計程式設計
- 傢俱行業如何製作自己的商城類小程式?行業
- 微信小程式,製作屬於自己的Icon圖示微信小程式
- 旅遊業企業如何製作自己的微信小程式?微信小程式