微信小程序-自定义弹出框

 

<---------------------------------定义组建------------------------------------------------------------------------->

// components/component-tag-name.js

Component({

options: {

multipleSlots: true // 在组件定义时的选项中启用多slot支持

},

/**

* 组件的属性列表

*/

properties: {

},

/**

* 组件的初始数据

*/

data: {

},

/**

* 组件的方法列表

*/

methods: {

myActionSheetCancel() {

this.hideMyActionSheet()

},

showMyActionSheet: function () {

// 显示遮罩层

var animation = wx.createAnimation({

duration: 200,

timingFunction: "linear",

delay: 0

})

this.animation = animation

animation.translateY(300).step()

this.setData({

animationData: animation.export(),

showModalStatus: true

})

setTimeout(function () {

animation.translateY(0).step()

this.setData({

animationData: animation.export()

})

}.bind(this), 200)

},

hideMyActionSheet: function () {

// 隐藏遮罩层

var animation = wx.createAnimation({

duration: 200,

timingFunction: "linear",

delay: 0

})

this.animation = animation

animation.translateY(300).step()

this.setData({

animationData: animation.export(),

})

setTimeout(function () {

animation.translateY(0).step()

this.setData({

animationData: animation.export(),

showModalStatus: false

})

}.bind(this), 200)

},

}

})

 

json

{

"component": true,

"usingComponents": {}

}

 

wxml

 

<!-- 组件模板 -->

<view class="wrapper">

<slot name="before"></slot>

<view class="maskLayer" bindtap="hideMyActionSheet" wx:if="{{showModalStatus}}"></view>

<view animation="{{animationData}}" class="actionSheetLayer" wx:if="{{showModalStatus}}">

<slot></slot>

<view class='cancel' bindtap='myActionSheetCancel'> 取消 </view>

</view>

</view>

 

wxss

/* components/component-tag-name.wxss */

.maskLayer {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background: #000;

opacity: 0.2;

overflow: hidden;

z-index: 1000;

color: #fff;

}

.actionSheetLayer {

width: 100%;

overflow: hidden;

position: fixed;

bottom: 0;

left: 0;

z-index: 2000;

background: #ededed;

}

.play{

width: 100%;

height: 98rpx;

line-height: 98rpx;

text-align: center;

background: #fff;

border-top: 1rpx solid rgba(204, 204, 204, 0.356);

}

.cancel{

width: 100%;

line-height: 98rpx;

height: 98rpx;

text-align: center;

background: #fff;

border-top: 1rpx solid #ededed;

margin-top: 10rpx;

}

<----------------------------------------引用页面------------------------------------------------------------------>

const app = getApp()

Page({

data: {

actionSheetText: ['选项1', '选项2', '选项3']

},

onLoad: function () {

this.myActionSheet = this.selectComponent(".list")

console.log(this);

},

showMyActionSheet() {

console.log('click');

this.myActionSheet.showMyActionSheet()

},

actionSheetIndex(e){

console.log('当前下标：', e.currentTarget.dataset.index)

}

})

 

 

JSON

 

 

{

"usingComponents": {

"myActionSheet": "/component/components/component-tag-name"

}

}

 

wxml

 

<!-- 引用组件的页面模版 -->

<view>

<myActionSheet class='list'>

<view slot="before" bindtap='showMyActionSheet' wx:for='{{5}}'>某图标</view>

<view wx:for='{{actionSheetText}}' class='cancelist' bindtap='actionSheetIndex' data-index='{{index}}'>{{item}}</view>

</myActionSheet>

</view>

 

wxss

 

.intro {

margin: 30px;

text-align: center;

}

.cancel{

width: 100%;

line-height: 98rpx;

height: 98rpx;

text-align: center;

background: #fff;

border-top: 1rpx solid #ededed;

margin-top: 10rpx;

}

.cancelist{

width: 100%;

line-height: 98rpx;

height: 98rpx;

text-align: center;

background: #fff;

border-top: 1rpx solid #ededed;

}

转载于:https://www.cnblogs.com/lipuqing180906/p/9604489.html