微信小程序實現氣泡彈出框

這個組件可以實現
引用別人的組件&＃xff0c;上面github可以很好的實現氣泡彈窗效果

view style&＃61;"margin-top: 200rpx;" class&＃61;"hello">view> !-- 以下style樣式均為實現動畫效果 -->view bindtap&＃61;"show" class&＃61;"timePicker" style&＃61;"position:relative" >第一列/view>!-- style 其中40*4 40為列表格的固定高度&＃xff0c;單位為px&＃xff0c;4為列表格數量 -->view class&＃61;"box" style&＃61;"height:{{show?40*4:&＃39;0&＃39;}}px; position: absolute; ">!-- 展示行 -->view class&＃61;"box-in" bindtap&＃61;"he">編輯/view>view class&＃61;"box-in">刪除/view>view class&＃61;"box-in">詳情/view>/view>/view>view>hello你認為呢/view>/view>


show:function(){
//如果show值為true&＃xff0c;則更改為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&＃61;"margin-top: 200rpx;" class&＃61;"hello">view>!-- 以下style樣式均為實現動畫效果 -->view bindtap&＃61;"show" class&＃61;"timePicker" style&＃61;"position:relative">第一列/view>!-- style 其中40*4 40為列表格的固定高度&＃xff0c;單位為px&＃xff0c;4為列表格數量 -->/view>view style&＃61;"position: relative;">view class&＃61;"sanjiaoxing" wx:if&＃61;"{{show}}" style&＃61;"position: absolute; left: 60rpx;">/view>view class&＃61;"box" style&＃61;"height:{{show?40*4:&＃39;0&＃39;}}px; position: absolute;top: 20rpx; border-radius: 10rpx;">view class&＃61;"box-in" bindtap&＃61;"he">編輯/view>view class&＃61;"box-in">刪除/view>view class&＃61;"box-in">詳情/view>/view>/view>view>hello你認為呢/view>/view>


.sanjiaoxing{/*寬高為0*/width: 0;height: 0;/*在三角形底邊設置一個邊界顏色/border-top: 20px solid red;/*其它3邊設置相同顏色&＃xff0c;*/border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;
}


樣式有點丑&＃xff0c;要繼續優化&＃xff0c;可以引用對應的氣泡類型的組件&＃xff0c;可以更好的實現效果。愛掏網 - it200.com

優化&＃xff1a;

!--components/tabchange/index.wxml-->
view style&＃61;"margin-top: 400rpx;" class&＃61;"hello">view style&＃61;"position: relative;">!-- 以下style樣式均為實現動畫效果 -->view style&＃61;"">view class&＃61;"bubble" style&＃61;"position: absolute; top: -320rpx;" wx:if&＃61;"{{show}}">view class&＃61;"box-in" bindtap&＃61;"he">盤點/view>view class&＃61;"box-in" bindtap&＃61;"del">盤點記錄/view>view class&＃61;"box-in">含水量/view>view class&＃61;"box-in">含水量記錄/view>/view>view bindtap&＃61;"show" style&＃61;"position: absolute; width: 130rpx;text-align: center;">!-- 圖標 -->van-icon name&＃61;"more-o" size&＃61;"20" />/view>!-- 站行 -->view style&＃61;"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: &＃39;&＃39;;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": "&＃64;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: &＃39;點擊了盤點&＃39;,icon:&＃39;none&＃39;})},show:function(){//如果show值為true&＃xff0c;則更改為false 反之設置trueif(this.data.show){this.setData({show:false})}else{this.setData({show:true})}},},lifetimes: {ready() {this.setData({dataItem: this.properties.dataItem})}}
})