微信小程式 下拉列表簡單例項
wcss
/**dropdownmenu**/
/*總選單容器*/
.menu
/*一級選單*/
.menu dt
/*二級選單外部容器樣式*/
.menu dd
/*二級選單普通樣式*/
.menu li
/*二級選單高亮樣式*/
.menu li.highlight
/* 顯示與隱藏 */
.show
.hidden
wxml
www.cppcns.comu">
} 時間：}
js//資料來源
var reportdatasync = [
, ,
] },
, ,
, ]
}, saofcpvw
, ]
} ]
//定義字段
var initsubmenudisplay =
var initsubmenuhighlight =
var initanimationdata =
/// 初始化dropdownmenu
loaddropdownmenu()
that.setdata()
//一級選單點選
tapmainmenu: function (e) else
} else
} this.setdata()
this.animation(index)
},
//二級選單點選
tapsubmenu: function (e) );
// 當前二級選單的標識
var indexarray = e.currenttarget.dataset.index.split('-');
// 刪除所在二級選單樣式
for (var i = 0; i < initsubmenuhighlight.length; i++)
} }
//給當前二級選單新增樣式
initsubmenuhighlight[indexarray[0]][indexarray[1]] = 'highlight';
//重新整理樣式
this.setdata();
// 設定動畫
this.animation(indexarray[0]);
},
//選單動畫
animation: function (index) )
// 是顯示還是隱藏
var flag = this.data.submenudisplay[index] == 'show' ? 1 : -www.cppcns.com1;
// 使之y軸平移
animation.translatey(flag * ((initsubmenuhighlight[index].length + 1) * 38)).step();
// 匯出到資料，繫結給view屬性
var animationstr = animation.export();
// 原來的資料
var animationdata = this.data.animat程式設計客棧iondata;
animationdata[index] = animationstr;
this.setdata(); }
///
/// 初始化dropdownmenu
/// 1.一級目錄 initsubmenudisplay ：['hidden']
/// 2.二級目錄 initsubmenuhighlight ：[['',''],['','','','']]]
///
function loaddropdownmenu()
initsubmenuhighlight.push(report)
//動畫
initanimationdata.push("") } }
本文標題: 微信小程式 下拉列表簡單例項
本文位址:
微信小程式下拉重新整理
使用了幾個方案，發現幾個注意點需要注意一下 方案一 整個布局只使用乙個scroll view，類目和列表放到該控制項下，這種狀態下重新整理可以，但是類目不能固定在頂部 方案二 整個布局使用乙個scroll view，裡面再巢狀使用scroll view，這種狀態下上拉幅度大的時候也會觸發下拉重新整理...
微信小程式 下拉重新整理
步驟一注意 enablepulldownrefresh 允許下拉重新整理 backgroundtextstyle 重新整理動畫中那個點的顏色 ios 值可以為dark light 步驟二 js檔案配置 頁面相關事件處理函式 監聽使用者下拉動作 onpulldownrefresh function 下...
微信小程式下拉重新整理
一 配置需要下拉重新整理的頁面的json檔案 enablepulldownrefresh true,函式 頁面相關事件處理函式 監聽使用者下拉動作 onpulldownrefresh function 二 onpulldownrefresh對scroll view元素不起作用 針對scroll vi...