• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

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

// 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;
}

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序的弹出框发布时间:2022-07-18
下一篇:
【小程序】微信小程序开发—弹出框发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap