微信小程序实现气泡弹出框

这个组件可以实现
引用别人的组件，上面github可以很好的实现气泡弹窗效果

  <view style="margin-top: 200rpx;" class="hello"><view>   <!-- 以下style样式均为实现动画效果 --><view bindtap="show" class="timePicker" style="position:relative" >第一列</view><!-- style 其中40*4 40为列表格的固定高度，单位为px，4为列表格数量 --><view class="box" style="height:{{show?40*4:'0'}}px; position: absolute; "><!-- 展示行 --><view class="box-in" bindtap="he">编辑</view><view class="box-in">删除</view><view class="box-in">详情</view></view></view><view>hello你认为呢</view></view>

show:function(){
//如果show值为true，则更改为false 反之设置true
if(this.data.show){
this.setData({
show:false
})
}else{
this.setData({
show:true
})
}
},

he(){
console.log(“sadasdd”)
this.setData({
show:!this.show
})
wx.navigateTo({
url: ‘/pages/test1/index’,
})
},

<view style="margin-top: 200rpx;" class="hello"><view><!-- 以下style样式均为实现动画效果 --><view bindtap="show" class="timePicker" style="position:relative">第一列</view><!-- style 其中40*4 40为列表格的固定高度，单位为px，4为列表格数量 --></view><view style="position: relative;"><view class="sanjiaoxing" wx:if="{{show}}" style="position: absolute; left: 60rpx;"></view><view class="box" style="height:{{show?40*4:'0'}}px; position: absolute;top: 20rpx; border-radius: 10rpx;"><view class="box-in" bindtap="he">编辑</view><view class="box-in">删除</view><view class="box-in">详情</view></view></view><view>hello你认为呢</view></view>

.sanjiaoxing{/*宽高为0*/width: 0;height: 0;/*在三角形底边设置一个边界颜色/border-top: 20px solid red;/*其它3边设置相同颜色，*/border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;
}

样式有点丑，要继续优化，可以引用对应的气泡类型的组件，可以更好的实现效果。

优化：

<!--components/tabchange/index.wxml-->
<view style="margin-top: 400rpx;" class="hello"><view style="position: relative;"><!-- 以下style样式均为实现动画效果 --><view style=""><view class="bubble" style="position: absolute; top: -320rpx;" wx:if="{{show}}"><view class="box-in" bindtap="he">盘点</view><view class="box-in" bindtap="del">盘点记录</view><view class="box-in">含水量</view><view class="box-in">含水量记录</view></view><view bindtap="show" style="position: absolute; width: 130rpx;text-align: center;"><!-- 图标 --><van-icon name="more-o" size="20" /></view><!-- 站行 --><view style="width: 100%;height: 40rpx;"></view></view></view>
</view>


.bubble{width:190rpx;height:290rpx;background:#fff;border:1rpx solid #ddd;border-radius: 14rpx;
}.bubble::after{content: '';position: absolute;left:50rpx;bottom:-32rpx;z-index: 2;width: 0;height: 0;border: 18rpx solid;border-color: rgb(211, 207, 207) transparent  transparent  transparent ;
}.box{width:30%;overflow: hidden;background-color: #fff;box-shadow: 0 0 15rpx black
}
.box-in{display: flex;align-items: center;height:70rpx;padding-left: 10rpx;border-bottom: #E5E5E5 1rpx solid;z-index: 99;
}

{"component": true,"usingComponents": {"van-icon": "@vant/weapp/icon/index"}
}

// components/common/son-home-info-template/index.js
Component({/*** 组件的属性列表*/properties: {//是否是仓库管理isBinManage: {type: Boolean,value: false},dataItem: {},navTitle: {type: String,value: ""}},/*** 组件的初始数据*/data: {show:false},/*** 组件的方法列表*/methods: {he(){this.setData({show:!this.data.show})wx.showToast({title: '点击了盘点',icon:'none'})},show:function(){//如果show值为true，则更改为false  反之设置trueif(this.data.show){this.setData({show:false})}else{this.setData({show:true})}},},lifetimes: {ready() {this.setData({dataItem: this.properties.dataItem})}}
})

微信小程序实现气泡弹出框相关推荐

html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
微信小程序 -- 自定义底部弹出框（带动画--滑入滑出）
实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画).效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属 ...
微信小程序评论input 弹出框
运用了一个组件: https://youzan.github.io/vant-weapp/#/popup 这里面有详细的介绍和使用方法!!! 需求:点击评论,弹出评论的输入框,再次点击评论又会隐藏弹出 ...
微信小程序自定义showmodal 弹出框
最近一直忙着修改bug 增加新功能,好久没总结了,也不知道该总结啥,先写一个自定义showmodal框吧废话少说直接上代码 wxml部分 <view class="mask" ...
微信小程序点击弹出输入框
微信小程序点击弹出输入框第一次写博客,我决定不要太old school. let's get it!最近在学习微信开发,刚接触到微信小程序,自己尝试着做了一个简单的小程序,过程中发现类似web开发中 ...
小程序确定取消弹窗_小程序开发之弹出框
小程序开发过程中,很多地方为了便利我们多采用小程序自带弹出框来实现交互效果.这也够大多数开发使用,下面我给大家详细介绍下小程序弹出框 wx.showToast() title:显示的提示信息,在没有图 ...
JAVA制作弹出小广告的程序_微信小程序实现首页弹出广告
本文实例为大家分享了微信小程序实现首页弹出广告的具体代码,供大家参考,具体内容如下这个微信小程序首页广告demo 仅供有需要的参考 .wxml this is ad //事件 catchtouchm ...
小程序全局悬浮窗_微信小程序悬浮窗弹出怎么实现?
微信小程序悬浮窗弹出怎么实现?很多的微信小程序管理员会在微信小程序界面开发微信小程序悬浮窗弹出功能,接下来小编会为大家介绍微信小程序悬浮窗弹出关注实现的全部步骤哦. 微信小程序悬浮窗弹出怎么实现? 微 ...

微信小程序实现气泡弹出框

微信小程序实现气泡弹出框相关推荐

最新文章

热门文章