@元件開發
1、與vue
元件用法類似。
a、建立元件：小程式中的元件與普通頁面目錄相同，例如需要建立乙個名為
component
的元件。首先建立乙個目錄為
component
的目錄，由
component.wxss
、component.wxml
、component.js
、component.json
四部分構成
.與普通頁面檔案差別：
component.json：需要宣告此檔案為元件模組，如下，其中
"component":true,
指明此檔案為頁面元件檔案。
"usingcomponents":
為此元件引用其它的元件列表。其它頁面呼叫當前元件同理，只需裝當前元件位址新增到
"usingcomponents":
中。"component":true,
"usingcomponents": );
其中重要組成部分由資料
data
、read
及其它生命週期鉤子函式、
methods
方法、properties
資料傳遞等幾項構成。其中
properties
比較特殊，是用來獲取父級頁面呼叫當前元件時的資料傳遞。
properties: }" 為頁面向元件中傳值部分。
brandcontribute-news
為上述中
properties
中定義的
brandcontributenews
的值，取值時需將呼叫元件中的上劃線變駝峰式。此處的
brandcontributenews
可以在元件之直接利用
this.data.brandcontributenews
獲取到。其中
observer
為資料更新時會記錄新值，與更改前上次值，模組中根據此項資料建立的檢視，在資料更新後會自動更新重排。
方法：如果要元件中呼叫父級頁面中的方法，在元件中的methods中定義方法，利用
triggerevent
傳遞引數。如下：
methods: // 觸發事件的選項
this.triggerevent('removecontrase', myeventdetail, myeventoption);
在元件中呼叫此方法如下：
這裡的showaddcontrastboxwrap為父頁面
js中的方法，並且
showaddcontrastboxwrap
接收引數
detail
，即為之前定義的
myeventdetail
，與myeventoption ,
如要獲取引數
myeventdetail
下的name,
在父級頁面
showaddcontrastboxwrap
中即為e.detail.name;
至此完成元件之前的呼叫、傳值。
@常見問題
1、在頁面中定義彈窗，在彈窗上面滑動時，頁面本身會隨著滑動方向上下滑動。
解決辦法：獲取可視區域高度，彈窗顯示時，將高度賦值給頁面最外層，並新增overflow:hidden屬性（可以定義乙個
class,
根據彈窗顯示狀態新增此
class
），彈窗隱藏，去除些屬性。但有一點，就是頁面會自動滾動到頂部，
scroll-top變為0
。2、頁面中如果有類似
echart
等canvas
元件，層級過高，會置於彈窗之上，設定
index
無效；解決辦法：目前只有在彈窗顯示時，設定圖表hidden屬性為
true;
echart
外掛程式（不能在
scroll
視窗中引入
echart,
否則會出現圖表不跟隨頁面滾動的情況）。
@例項echart,
**：import * as echarts from '../../ec-canvas/echarts';
component(;
otmp.name = newdata[i].brand;
otmp.codeupdate = newdata[i].list[len - 1].codeupdate;
otmp.type = newdata[i].list[len - 1].type;
otmp.code = newdata[i].list[len - 1].value;
datetime = newdata[i].list[len - 1].time;
atmp.push(otmp);
this.setdata(
return option;
元件頁面呼叫圖表：
2、左右滑動刪除當前項
//滑動事件定義
touchs: function (e) else if (disx > 0) {//移動距離大於
0，文字層
left
值等於手指移動距離
txtstyle = "left:-" + disx + "px";
if (disx >= delbtnwidth) {
//控制手指移動距離最大值為刪除按鈕的寬度
txtstyle = "left:-" + delbtnwidth + "px";
//獲取手指觸控的是哪一項
var index = e.currenttarget.dataset.index;
var list = this.data.atxtstyle;
list[index] = txtstyle;
//更新列表的狀態
this.setdata({
atxtstyle: list
touche: function (e) {
if (e.changedtouches.length == 1) {
//手指移動結束後水平位置
var endx = e.changedtouches[0].clientx;
//觸控開始與結束，手指移動的距離
var disx = this.data.startx - endx;
var delbtnwidth = this.data.delbtnwidth;
//如果距離小於刪除按鈕的
1/2，不顯示刪除按鈕
var txtstyle = disx > delbtnwidth / 2 ? "left:-" + delbtnwidth + "px" : "left:0px";
//獲取手指觸控的是哪一項
var index = e.currenttarget.dataset.index;
var list = this.data.atxtstyle;
list[index] = txtstyle;
//更新列表的狀態
this.setdata({
atxtstyle: list
頁面中呼叫滑動方法：updatenamestory 為點選時執行的方法
微信小程式開發筆記 05
pages list list.wxss loadmore bindtap loadmore data lastid class loadmore 載入更多view 獲取應用例項 介面反饋提示 page loaddata function lastid return false var len re...
微信小程式 雲開發筆記
獲取集合內所有的資料，一般只能獲取20條 db.collection 集合名 get then res 獲取集合內具體id的資料 db.collection 集合名 doc id get then res 3.獲取progress大於等於50的資料 const a db.command db.col...
微信小程式開發筆記（三） 模板
為什麼要用模板呢？當多個頁面需要有一樣的元件時，使用模板會比較方便。table of contents 一 定義模板 使用模板 二 使用模板 三 列表渲染 模板 頁面傳值 1.列表渲染 2.template.wxml裡的模板 頁面傳值 3.js中的事件定義 使用 name 屬性，作為模板的名字。然後...