微信小程式顯示下拉式清單功能的實作方法

小云云
發布: 2017-12-13 09:48:07
原創
14449 人瀏覽過

本文主要介紹微信小程式顯示下拉清單功能,涉及微信小程式navigator元件導覽及頁面載入相關操作技巧,希望能幫助大家。

1、效果顯示

2、關鍵程式碼

app.json檔案:

{
 "pages":[
  "views/views",
  "views/navigators/navigator1/navigator1",
  "views/navigators/navigator2/navigator2",
  "views/navigators/navigator3/navigator3",
  "pages/index/index",
  "pages/logs/logs"
 ],
 "window":{
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "脚本之家 下拉列表测试",
  "navigationBarTextStyle":"black"
 }
}
登入後複製

#views.js檔案

Page({
 data:{
  // text:"这是一个页面"
  open:false
 },
 showitem:function(){
   this.setData({
     open:!this.data.open
   })
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
  // 页面渲染完成
 },
 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 }
})
登入後複製

views.wxml檔

<view class="page">
  <view class="page_bd">
    <view class="body_head" bindtap="showitem">点击我显示下拉列表</view>
    <navigator url="../views/navigators/navigator1/navigator1"><view class="{{open?&#39;display_show&#39;:&#39;display_none&#39;}}">列表1</view></navigator>
    <navigator url="../views/navigators/navigator2/navigator2"><view class="{{open?&#39;display_show&#39;:&#39;display_none&#39;}}">列表2</view></navigator>
    <navigator url="../views/navigators/navigator3/navigator3"><view class="{{open?&#39;display_show&#39;:&#39;display_none&#39;}}">列表3</view></navigator>
  </view>
</view>
登入後複製

#view.wxss檔

.page_bd{
  padding: 10px;
  background-color: snow;
}
.body_head{
  border: 1px solid;
  border-color: beige;
  padding: 10px;
}
.display_show{
  display: block;
  border: 1px solid;
  border-color: beige;
  padding: 10px;
}
.display_none{
  display: none;
}
登入後複製

#相關推薦:

javascript對HTML下拉清單標籤的操作

使用jquery實作下拉清單選項

html中關於下拉清單select的圖文程式碼詳解

#

以上是微信小程式顯示下拉式清單功能的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!