91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

微信小程序 下拉菜單簡單實例

發布時間:2020-08-25 16:22:56 來源:腳本之家 閱讀:146 作者:lqh 欄目:web開發

微信小程序 下拉菜單簡單實例

wcss 

/**DropDownMenu**/ 
 
/*總菜單容器*/ 
 
.menu { 
 display: block; 
 height: 28px; 
 position: relative; 
} 
 
/*一級菜單*/ 
 
.menu dt { 
 font-size: 15px; 
 float: left; 
 /*hack*/ 
 width: 33%; 
 height: 38px; 
 border-right: 1px solid #d2d2d2; 
 border-bottom: 1px solid #d2d2d2; 
 text-align: center; 
 background-color: #f4f4f4; 
 color: #5a5a5a; 
 line-height: 38px; 
 z-index: 2; 
} 
 
/*二級菜單外部容器樣式*/ 
 
.menu dd { 
 position: absolute; 
 width: 100%; 
 margin-top: 40px; 
 left: 0; 
 z-index: -99; 
} 
 
/*二級菜單普通樣式*/ 
 
.menu li { 
 font-size: 14px; 
 line-height: 34px; 
 color: #575757; 
 height: 34px; 
 display: block; 
 padding-left: 8px; 
 background-color: #fff; 
 border-bottom: 1px solid #dbdbdb; 
} 
 
/*二級菜單高亮樣式*/ 
 
.menu li.highlight { 
 background-color: #f4f4f4; 
 color: #48c23d; 
} 
 
/* 顯示與隱藏 */ 
 
.show { 
 /*display: block;*/ 
 visibility: visible; 
} 
 
.hidden { 
 /*display: none;*/ 
 visibility: hidden; 
} 

wxml  

<dl class="menu"> 
  <block wx:for="{{reportData}}" wx:key="idMenu" wx:for-item="menuItem" wx:for-index="idMenu"> 
   <dt data-index="{{idMenu}}" bindtap="tapMainMenu">{{menuItem.reportType}}</dt> 
   <dd class="{{subMenuDisplay[idMenu]}}" animation="{{animationData[idMenu]}}"> 
    <ul wx:for="{{menuItem.chilItem}}" wx:key="chilItem.ID" wx:for-item="chilItem" wx:for-index="idChil"> 
     <li class="{{subMenuHighLight[idMenu][idChil]}}" bindtap="tapSubMenu" data-index="{{idMenu}}-{{idChil}}">{{chilItem.Name}}</li> 
    </ul> 
    <picker class="timePicker" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange" start="1999-01-01" end="2999-12-12"> 時間:{{dateValue}}</picker> 
   </dd> 
  </block> 
</dl> 

js 

//數據源 
var ReportDataSync = [ 
  { 
    reportType: "日報1", 
    chilItem: [ 
      { ID: 1, Name: "日報1", ReportUrl: "DailyReport.aspx", Type: 1 }, 
      { ID: 2, Name: "日報2", ReportUrl: "DailyReport.aspx", Type: 1 }, 
      { ID: 3, Name: "日報3", ReportUrl: "DailyReport.aspx", Type: 1 }] 
  }, 
  { 
    reportType: "目錄2", 
    chilItem: [ 
      { ID: 1, Name: "目錄1", ReportUrl: "DailyReport.aspx", Type: 2 }, 
      { ID: 2, Name: "目錄2", ReportUrl: "DailyReport.aspx", Type: 2 }, 
      { ID: 3, Name: "目錄3", ReportUrl: "DailyReport.aspx", Type: 2 }, 
      { ID: 4, Name: "目錄4", ReportUrl: "DailyReport.aspx", Type: 2 }] 
  }, 
  { 
    reportType: "月報3", 
    chilItem: [ 
      { ID: 1, Name: "月報1", ReportUrl: "DailyReport.aspx", Type: 1 }, 
      { ID: 2, Name: "月報2", ReportUrl: "DailyReport.aspx", Type: 2 }] 
  } 
] 
 
//定義字段 
var initSubMenuDisplay = []  
var initSubMenuHighLight = [] 
var initAnimationData = [] 
 
/// 初始化DropDownMenu 
loadDropDownMenu() 
 
that.setData({ 
  reportData: ReportDataSync,//菜單數據 
  subMenuDisplay: initSubMenuDisplay, //一級 
  subMenuHighLight: initSubMenuHighLight, //二級 
   animationData: initAnimationData //動畫 
}) 
 
 
 
//一級菜單點擊 
tapMainMenu: function (e) { 
  //獲取當前一級菜單標識 
  var index = parseInt(e.currentTarget.dataset.index); 
  //改變顯示狀態 
  for (var i = 0; i < initSubMenuDisplay.length; i++) { 
    if (i == index) { 
      if (this.data.subMenuDisplay[index] == "show") { 
        initSubMenuDisplay[index] = 'hidden' 
      } else { 
        initSubMenuDisplay[index] = 'show' 
      } 
    } else { 
      initSubMenuDisplay[i] = 'hidden' 
    } 
  } 
  this.setData({ 
    subMenuDisplay: initSubMenuDisplay 
  }) 
    this.animation(index) 
}, 
 
//二級菜單點擊 
tapSubMenu: function (e) { 
  //隱藏所有一級菜單 
  //this.setData({ 
  //subMenuDisplay: initSubMenuDisplay() 
  //}); 
  // 當前二級菜單的標識 
  var indexArray = e.currentTarget.dataset.index.split('-'); 
   // 刪除所在二級菜單樣式 
  for (var i = 0; i < initSubMenuHighLight.length; i++) { 
    if (indexArray[0] == i) { 
      for (var j = 0; j < initSubMenuHighLight[i].length; j++) { 
        initSubMenuHighLight[i][j] = ''; 
      } 
    } 
  } 
  //給當前二級菜單添加樣式 
  initSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight'; 
  //刷新樣式 
  this.setData({ 
    subMenuHighLight: initSubMenuHighLight 
  }); 
   // 設置動畫 
   this.animation(indexArray[0]); 
}, 
 
//菜單動畫 
animation: function (index) { 
    // 定義一個動畫 
   var animation = wx.createAnimation({ 
     duration: 400, 
    timingFunction: 'linear', 
  }) 
  // 是顯示還是隱藏 
  var flag = this.data.subMenuDisplay[index] == 'show' ? 1 : -1; 
  // 使之Y軸平移 
  animation.translateY(flag * ((initSubMenuHighLight[index].length + 1) * 38)).step(); 
  // 導出到數據,綁定給view屬性 
   var animationStr = animation.export(); 
  // 原來的數據 
   var animationData = this.data.animationData; 
  animationData[index] = animationStr; 
  this.setData({ 
    animationData: animationData 
  }); 
} 
 
 
/// <summary> 
/// 初始化DropDownMenu 
/// 1.一級目錄 initSubMenuDisplay :['hidden'] 
/// 2.二級目錄 initSubMenuHighLight :[['',''],['','','','']]] 
/// </summary> 
function loadDropDownMenu() { 
  for (var i = 0; i < ReportDataSync.length; i++) { 
    //一級目錄 
    initSubMenuDisplay.push('hidden') 
    //二級目錄 
    var report = [] 
    for (var j = 0; j < ReportDataSync[i].chilItem.length; j++) { 
      report.push(['']) 
    } 
    initSubMenuHighLight.push(report) 
       //動畫 
    initAnimationData.push("") 
  } 
} 

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

腾冲县| 雷波县| 漳平市| 东阳市| 麻栗坡县| 靖江市| 建宁县| 南溪县| 邵东县| 察雅县| 哈尔滨市| 霍州市| 盈江县| 郴州市| 铁岭县| 天气| 夏邑县| 张北县| 安仁县| 金堂县| 海盐县| 琼结县| 曲麻莱县| 泗洪县| 东平县| 巴东县| 从化市| 民乐县| 伊吾县| 巴楚县| 波密县| 资讯| 通江县| 唐河县| 茌平县| 永康市| 南通市| 马关县| 石渠县| 长兴县| 梧州市|