小程序模板網(wǎng)

黃秀杰小程序入門(mén)佳品——增刪改查+頁(yè)面跳轉(zhuǎn)+傳值取值+布局樣式 ... ... ...

發(fā)布時(shí)間:2018-04-23 11:08 所屬欄目:小程序開(kāi)發(fā)教程
目標(biāo)場(chǎng)景
分類(lèi)管理

技術(shù)點(diǎn)
  • 讀取分類(lèi)列表
  • 點(diǎn)擊某分類(lèi)進(jìn)入編輯頁(yè),操作編輯與刪除
  • 點(diǎn)擊列表頁(yè)底部按鈕,跳轉(zhuǎn)添加,共用編輯頁(yè)
效果
 

列表頁(yè)js

 

					
  1. var Bmob = require('../../utils/bmob.js');var that;
  2. Page({
  3. onLoad: function () {
  4. that = this;
  5. },
  6. onShow: function () {
  7. that.loadCategories();
  8. },
  9. loadCategories: function () {
  10. var query = new Bmob.Query('Category');
  11. query.limit(Number.Max_VALUE);
  12. query.find().then(function (categories) {
  13. console.log(categories);
  14. that.setData({
  15. categories: categories
  16. });
  17. });
  18. },
  19. add: function () {
  20. // 跳轉(zhuǎn)添加頁(yè)面
  21. wx.navigateTo({
  22. url: '../add/add'
  23. });
  24. },
  25. })

可以看到,上面使用了onShow代替了onLoad作為加載請(qǐng)求loadCategories,這是因?yàn)榭紤]到添加完畢后會(huì)有返回上頁(yè),能和自刷新最新數(shù)據(jù)。

相應(yīng)的布局頁(yè)面

 

					
  1.  
  2. class="item" wx:for="{{categories}}" wx:key="">
  3. class="title" url="../add/add?objectId={{item.objectId}}" open-type="navigate" hover-class="none">{{item.title}}
  4.  
  5.  
  6. class="add-category" bindtap="add">
  7. src="/images/add.png" class="icon" />
  8. class="caption">新增分類(lèi)
  9.  

列表頁(yè)跳轉(zhuǎn)可以使用代替的bindtap,這樣更簡(jiǎn)潔一些;而底部的添加按鈕使用position: fixed固定底部;wx:for循環(huán)提供objectId作為參數(shù),以傳遞給編輯頁(yè)面。

編輯頁(yè)面

 

					
  1. var Bmob = require('../../utils/bmob.js');var that;
  2. Page({
  3. onLoad: function (
  4.  


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://www.u-renovate.com/wxmini/doc/course/23895.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線(xiàn)咨詢(xún)
AI智能客服 ×