微信小程序开发之下拉菜单

实现功能:点击维保人员,调出下拉菜单。选择子菜单时,显示右边的图标表示选中,并进行赋值并进行搜索筛选

Wxml:

<view class="dtclass" bindtap="loadtype"><span>{{SercherType}}</span>
    <image src="../../images/xiala.png" style="height:10px;width:20rpx;margin-top:30rpx"></image>
  </view>

<!--查询类型下拉列表-->
<view class="ddclass" hidden="{{listFlag}}" style="z-index:100">
  <view wx:for="{{SercherTypeData}}" wx:key="id">
    <view class="liclass" id="{{item.id}}" bindtap="tapSubMenu">
      <text style="width:100rpx">{{item.name}}</text>
      <icon hidden="{{!item.highlight}}" type="success_no_circle" color="#ec9e14" style="float:right" />
    </view>
  </view>
</view>

Wxss:

/*二级菜单外部容器样式*/
   .ddclass {
 position: absolute;
 width: 100%;
 margin-top: 10px;
 left: 0;
 
}

/*二级菜单普通样式*/
 
 .liclass {
 font-size: 14px;
 line-height: 34px;
 color: #575757;
 height: 34px;
 display: block;
 padding-left: 18px;
 background-color: #fff;
 border-bottom: 1px solid #dbdbdb;
}
 
/*二级菜单高亮样式*/
 
 li.highlight {
 background-color: #f4f4f4;
 color: #48c23d;
}

js:

data:{

listFlag: true,             //下拉列表显示标志位

}

//打开搜索类别下拉菜单
  loadtype:function(){
    var that=this;
    that.setData({
    listFlag:!that.data.listFlag,
    //StorageFlag:false})
  },

//点击菜单选项,修改查询类型
  tapSubMenu:function(e)
  {
    var that=this;
    var index=parseInt(e.currentTarget.id);
    //显示对应的勾图标
    for (var j = 0; j < that.data.SercherTypeData.length; j++) {
      if(j==index)
      {
          that.data.SercherTypeData[j].highlight = true;
      }
      else{
        that.data.SercherTypeData[j].highlight = false;
      }
    }
    that.setData({

//查询数据
      // SercherType: that.data.SercherTypeData[index].name,
      // SercherTypeData: that.data.SercherTypeData,
      //SercherTypeNum:1,
      listFlag: true,
     })
  },

时间: 2024-08-04 23:50:09

微信小程序开发之下拉菜单的相关文章

微信小程序开发日记——高仿知乎日报(上)

本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序开发日记--高仿知乎日报(上) 微信小程序开发日记--高仿知乎日报(中) 微信小程序开发日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 API分析 启动页 轮播图 日报列表 浮动按钮 侧滑菜单 API分析 以下是使用到的具体API,更加详细参数和返回结

微信小程序开发系列一:微信小程序的申请和开发环境的搭建

我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序: https://mp.weixin.qq.com/cgi-bin/wx 点击按钮"前往注册".注意我们需要使用一个没有注册过微信小程序或者微信公众号的邮箱.我用的是网易邮箱.注册之后,邮箱会收到一封激活邮件. 激活之后,就可以进入小程序主体信息登记页面了.这里需要使用×××号码和手机验

微信小程序开发入门(一),Nodejs搭建本地服务器

1.  如何模拟真实环境中,读取服务端数据,首先需要使用Nodejs搭建一个本地服务器的环境. 在搭建web服务器之前,需要先安装node.js(安装版本最好为6.9.x) 安装后node.js,接下来就需要安装http的镜像文件 npm install http-server -g(windows下)sudo npm install http-server -g(linux和mac下)接下来在桌面创建一个文件夹 cd 文件夹名字http-server这时候,就会显示在8080端口下运行的一个本

微信小程序开发基础(一)「配置」与「逻辑层」

微信小程序作为微信生态重要的一环,在实际生活.工作.商业中的应用越来越广泛.想学习微信小程序开发的朋友也越来越多,本文将在小程序框架的基础上就微信小程序项目开发所必需的基础知识及语法特点进行了详细总结和阐述,包括配置.函数.语法.事件及其处理.数据绑定.模块.样式等.想开发小程序,这些内容是必须掌握的. 全文知识结构预览: 一.程序配置: 1.全局配置:2.页面配置 二.逻辑层: 1.程序注册:App()方法:2.页面注册:Page()方法:3.模块与调用:4.微信原生API 三.视图层(将在单

微信小程序开发(3) 热门电影

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: f

我们的微信小程序开发

基于微信小程序的系统开发准备工作 腾讯推出微信小程序也有一段时间了,在各种行业里面也都掀起一阵阵的热潮,很多APP应用被简化为小程序的功能迅速推出,同时也根据小程序的特性推出各种独具匠心的应用,相对传统的APP来说,微信小程序确实能够大大降低开发成本和难度,但也意味着需要掌握整个微信小程序的各种接口功能.应用场景等相关技术点,本篇随笔先从大的方面来介绍微信小程序开发的一些知识,如架构设计.技术路线 .工具准备等方面做一些浅薄的介绍,希望大家也有所收益,有所借鉴,则善莫大焉. 1.小程序的统一架构

微信小程序开发交流与推广

一.请加微信群: 请扫描下方的二维码加“微信小程序交流推广群”,由于微信群的限制,超过 100 人就不能扫码加群,大家可以先添加微信号:us9488 并备注“微信小程序”,然后拉你入群. 二.官方文档: 微信小程序介绍 微信小程序设计指南 微信小程序开发文档 微信小程序运营规范 微信小程序开发者社区 三.微信小程序解决方案: 微信小程序会话管理场景 微信小程序文件上传下载应用场景 微信小程序WebSocket长连接应用场景 微信小程序视频应用场景 四.代码: 会话管理场景 文件上传下载应用场景

微信小程序开发优秀教程及文章合集第一期

我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列:微信小程序开发手记<一>:项目的代码结构微信小程序开发手记<二>:属性display微信小程序开发手记<三>:backgroud和border属性微信小程序开发手记<四>:视图容器微信小程序开发手记<五>:组件微信小程序开发手记<六>:API 艺龙系列:精品!艺龙小程序:开发项目遇到的问题以及解决方案:http://www.wxapp-unio

金华兰溪义乌永康东阳微信小程序开发公司 天玑一号旺铺微信小程序

小公司开发自己的微信小程序是非常有必要的,下面上海微信小程序开发公司天玑[一号旺铺]就给大家说说开发自己的微信小程序会给大家带来什么好处.天玑金华.兰溪.义乌.永康.东阳微信小程序开发公司 天玑一号旺铺微信小程序开发报价咨询:http://www.wangpu1.com/全国免费热线:15058525901(微信同号) 小程序一定是基于 Html5+微信原生能力 的产品形态无需下载安装说明跟 App Store 的 APP 是不一样的,小程序是嵌在微信 APP 内的,微信提供标准化入口,当用户订