> 위챗 애플릿 > 미니 프로그램 개발 > WeChat 애플릿 표시 드롭다운 목록 기능을 구현하는 방법

WeChat 애플릿 표시 드롭다운 목록 기능을 구현하는 방법

小云云
풀어 주다: 2017-12-13 09:48:07
원래의
14482명이 탐색했습니다.

이 글에서는 주로 WeChat 애플릿 탐색기 구성 요소 탐색 및 페이지 로딩 관련 작업 기술과 관련된 WeChat 애플릿 표시 드롭다운 목록 기능을 소개합니다.

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(){
  // 页面关闭
 }
})
로그인 후 복사

조회수. 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;
}
로그인 후 복사

관련 권장 사항:

HTML 드롭다운 목록 태그의 javascript 작업

jquery를 사용하여 드롭다운 목록 옵션 구현

html 드롭다운 목록 선택을 위한 그래픽 코드에 대한 자세한 설명

위 내용은 WeChat 애플릿 표시 드롭다운 목록 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿