微信小程式-下拉選單
阿新 • • 發佈:2018-12-21
目錄
一、效果圖
二、實現原理
跟網頁的下拉列表實現是一樣的,剛剛開始預設下拉的內容的是不顯示的(display:none),然後通過點選的時候,去更改 display 的屬性值,來實現下拉的效果。然後下拉的動畫的通過 css3 的 animation 來實現的。
CSS3中新增的新屬性 animation
是用來為元素實現動畫效果的,但是animation
無法單獨擔當起實現動畫的效果。承載動畫的另一個屬性 —— @keyframes
。使用的時候為了相容可加上-webkit-、-o-、-ms-、-moz-、-khtml-
三、原始碼
實現比較簡單,程式碼帶有必要的解釋,所有就不贅述了。如果有什麼看不懂的,可以在評論區提問,博主每天都會回覆的。
index.wxml
- <!--page/one/index.wxml-->
- <view class="page">
- <view class="nav-son" bindtap="listpx">
- <view>我的下拉列表</view>
- <image src='{{imgUrl}}'></image>
- </view>
- <view
class="temp {{pxopen ? 'slidown' : 'slidup'}} {{pxshow ? 'disappear':''}}"> - <view wx:for="{{content}}">
- {{item}}
- </view>
- </view>
- </view>
- <button>按鈕</button>
index.wxss
- /* 下拉列表的樣式 */
- .nav-son{
- position: relative;
- /* 讓下拉提示資訊永遠放於下拉內容的上面 */
- z-index
: 99; - border-top: 1px solid #d1d3d4;
- border-bottom: 1px solid #d1d3d4;
- background: #fff;
- display: flex;
- height: 40px;
- align-items:center;
- font-size: 18px;
- }
- /* 下拉列表 下三角的樣式 */
- .nav-son image{
- position: absolute;
- right: 30rpx;
- width: 50rpx;
- height: 50rpx;
- }
- /* 下拉框的樣式 */
- .temp{
- /* 預設為不顯示 */
- display:none;
- /* 下拉框的寬度, */
- width: 100%;
- /* 下拉框的最大高度 */
- max-height: 750rpx;
- overflow-y: scroll;
- padding: 0 0 0 20rpx;
- line-height:100rpx;
- background: #fff;
- }
- /* 下拉框內容的樣式 */
- .temp view{
- border-bottom: 1px solid #d1d3d4;
- font-size: 14px;
- color: #666;
- }
- /* 下拉動畫 */
- /* @keyframes Css3 新標籤,迴圈動畫 */
- @keyframes slidown{
- from{
- transform: translateY(-100%);
- }
- to{
- transform: translateY(0%);
- }
- }
- .slidown{
- display: block;
- animation: slidown .2s ease-in both;
- }
- /* 上拉動畫 */
- @keyframes slidup{
- from{
- transform: translateY(0%);
- }
- to{
- transform: translateY(-100%);
- }
- }
- .slidup{
- display: block;
- animation: slidup .2s ease-in both;
- height: 0px;
- }
index.js
- Page({
- data: {
- content: [],
- px: [],
- pxopen: false,
- pxshow: false,
- active:true,
- imgUrl: "../../images/down.png"
- },
- onLoad: function() {
- this.setData({
- px: ['>預設排序', '>離我最近']
- })
- },
- listpx: function(e) {
- console.log(e)
- if (this.data.pxopen) {
- this.setData({
- pxopen: false,
- pxshow: false,
- active: true,
- imgUrl: "../../images/down.png"
- })
- } else {
- this.setData({
- content: this.data.px,
- pxopen: true,
- pxshow: false,
- active:false,
- imgUrl: "../../images/up.png"
- })
- }
- console.log(e.target)
- }
- })