Rumah > applet WeChat > Pembangunan program mini > 微信小程序模拟下拉菜单开发实例

微信小程序模拟下拉菜单开发实例

小云云
Lepaskan: 2018-03-17 12:16:18
asal
6257 orang telah melayarinya

本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家。

一.知识点

1.实现动态显示和隐藏某个控件

列表1

  data:{
    open:false
  },
  showitem:function(){
      this.setData({
          open:!this.data.open
      })
  },
Salin selepas log masuk
.display_show{
    display: block;
}
.display_none{
    display: none;
}
Salin selepas log masuk

2.通过 data-*e.target.dateset 传递参数

{{firstPerson}}

    this.setData({
             firstPerson:e.target.dataset.me,
       })
Salin selepas log masuk

这时:firstPerson=吃

3.弹性盒字:display:flex;

<view class="phone_one" bindtap="clickPerson">
    <view class="phone_personal">{{firstPerson}}</view>
    <image src="../../image/i.png" class="personal_image {{selectArea ? &#39;rotateRight&#39; :&#39;&#39;}}"></image>
</view>
Salin selepas log masuk

在父级:

display:flex;
justify-content:space-between;

这样子集就会并列。justify-content:space-between;这样子集就会分别在在俩头

二.事列

(1).下拉列表

1.wxml

<view class="page">
    <view class="page_bd">
        <view class="body_head" bindtap="showitem">点击我显示下拉列表</view>
        <navigator url="pages/list/list">
        	<view class="{{open?&#39;display_show&#39;:&#39;display_none&#39;}}">列表1</view>
        </navigator>
        <navigator url="pages/scroll-view/index">
        	<view class="{{open?&#39;display_show&#39;:&#39;display_none&#39;}}">列表2</view>
        </navigator>
        <navigator url="pages/scroll-view/index">
        	<view class="{{open?&#39;display_show&#39;:&#39;display_none&#39;}}">列表3</view>
        </navigator>
    </view>
</view>
Salin selepas log masuk

2.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;
}
Salin selepas log masuk


3.js

Page({
  data:{
    open:false
  },
  showitem:function(){
      this.setData({
          open:!this.data.open
      })
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})
Salin selepas log masuk


(2).下拉菜单

1.wxml

<view class="phone_one" bindtap="clickPerson">
    <view class="phone_personal">{{firstPerson}}</view>
    <image src="../../image/i.png" class="personal_image {{selectArea ? &#39;rotateRight&#39; :&#39;&#39;}}"></image>
</view>

    
 
Salin selepas log masuk

2.wxss

phone_personal{
  width: 100%;
  color:rgb(34, 154, 181);
  height:100rpx;
  line-height:100rpx;
  text-align: center;
}
.phone_one{
    display:flex;
    position:relative;
    justify-content:space-between;
    background-color:rgb(239, 239, 239);
    width:90%;
    height:100rpx;
    margin:22px auto;
    border-radius:10rpx;
    border-bottom:2rpx solid rgb(255, 255, 255);
    line-height:51px;
    padding-left:10px;
}
.person_box{
  position: relative;
}
.phone_select{
  margin-top:0;
  z-index: 100;
  position: absolute;
}
.select_one{
  text-align: center;
  background-color:rgb(239, 239, 239);
  width:676rpx;
  height:100rpx;
  line-height:100rpx;
  margin:0 5%;
  border-bottom:2rpx solid rgb(255, 255, 255);
}
.personal_image{
  z-index: 100;
  position: absolute;
  right:2.5%;
  width: 34rpx;
  height: 20rpx;
  margin:40rpx 20rpx 40rpx 0;
  transition: All 0.4s ease; 
  -webkit-transition: All 0.4s ease;
}
.rotateRight{
  transform: rotate(180deg);
}
Salin selepas log masuk

3.js

Page({
  data:{
    selectPerson:true,
    firstPerson:&#39;兴趣&#39;,
    selectArea:false,
  },
  //点击选择类型
  clickPerson:function(){
    var selectPerson = this.data.selectPerson;
    if(selectPerson == true){
        this.setData({
        selectArea:true,
        selectPerson:false,
      })
    }else{
      this.setData({
        selectArea:false,
        selectPerson:true,
      })
    }
  } ,
  //点击切换
  mySelect:function(e){
    this.setData({
      firstPerson:e.target.dataset.me,
      selectPerson:true,
      selectArea:false,
    })
  },
  onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
  // 页面渲染完成
  },
  onShow:function(){
  // 页面显示
  },
  onHide:function(){
  // 页面隐藏
  },
  onUnload:function(){
  // 页面关闭
  }
})
Salin selepas log masuk


相关推荐:

JavaScript模拟下拉菜单代码_表单特效

Atas ialah kandungan terperinci 微信小程序模拟下拉菜单开发实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan