当前位置:网站首页>Applet popup half angle mask layer
Applet popup half angle mask layer
2022-07-07 09:48:00 【Dehong demon king】
️️️️️️ 🥳🥳🥳 Thousands of people , Thank you for reading my article at this moment , Thanks for watching , Hello, everyone , Welcome to the artificial intelligence exchange group ( Watch my news ), More peripheral benefits are waiting for you 🥳🥳🥳
Welcome to subscribe to this column or follow me , Let's work together to solve an algorithm problem every day
️️️ Last , I hope my article can be helpful to your !
I wish myself and you in the future , Keep learning , Keep improving , Keep loving , Go to the mountains and seas ! ️️️
Catalog
The applet pops up the half angle mask layer style code , The effect is as follows :
This is nonsense : A simple case of a small program , adopt wx:if You can trigger the click event to pop up the mask layer , Only need view Write your other requirements in it
Basic code :
wxml
<!--pages/index/components/buy/index.wxml-->
<view class="box" >
<view class="empty-box" bindtap="hideModal" id="empty-box"></view>
<scroll-view scroll-y style="max-height:80vh;">
<view class="content" style="transform:translateY({
{translateY}}px);" animation="{
{animate}}">
<!-- boll -->
<view style="height: 700rpx;"></view>
<!-- Button -->
<view class="button" bindtap="confirm">
<view> confirm </view>
</view>
</view>
</scroll-view>
</view>
css
/* pages/index/components/buy/index.wxss */
.flex {
display: flex;
align-items: center;
}
.box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
}
.empty-box {
flex: 1;
background-color: transparent;
}
/* Content view */
.content {
width: 100vw;
background: rgba(255, 255, 255, 1);
opacity: 1;
border-radius: 20px 20px 0px 0px;
z-index: 1001;
}
/* Head */
.header {
position: relative;
height: 80rpx;
width: 100vw;
}
.header > view {
position: absolute;
top: 26rpx;
left: calc(50vw - 30rpx);
width: 60rpx;
height: 10rpx;
background: rgba(161, 166, 175, 1);
opacity: 0.6;
border-radius: 6rpx;
}
/* Courier */
.item {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100vw - 80rpx);
padding: 0 40rpx;
height: 100rpx;
background: rgba(255, 255, 255, 1);
opacity: 1;
}
.item-no-selected {
width: 36rpx;
height: 36rpx;
background: rgba(255, 255, 255, 1);
border: 2rpx solid rgba(112, 112, 112, 1);
border-radius: 50%;
opacity: 0.5;
}
.item-selected {
width: 40rpx;
height: 40rpx;
}
/* Button */
.button {
width: 100vw;
padding: 80rpx 40rpx 20rpx 40rpx;
}
.button >view {
width: calc(100% - 80rpx);
height: 98rpx;
border-radius: 50rpx;
line-height: 98rpx;
text-align: center;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: rgba(255, 255, 255, 1);
background: rgba(237, 58, 74, 1);
opacity: 1;
}
Click to display
The above is the basic code , Convenient for everyone to quickly copy and paste , Next, show the pop-up mask layer through the button
The new button
<view style="background-color: yellowgreen;width: 190rpx;height: 70rpx;margin-right: 5rpx;margin-left: 5rpx;justify-content: center;display: flex;flex-direction: row;align-items: center;border-radius: 10rpx;color: white;" bindtap="show_hideModal"> Get authorization code </view>
newly build js event :
show_hideModal:function(){
let that=this;
that.setData({
hideModal:true
})
},
Test after clicking the button :
Then how to close it ? At this time, we can click the shadow part , Or add a button × Call method to close , Same thing , take hideModal Change it to false that will do
Click the shadow part to close
hideModal:function(){
let that=this;
that.setData({
hideModal:false
})
},
summary
The above is a small case today , Because of the reason of development , Can only briefly describe , If it works for you , Welcome to your favorite articles See you next time !!!!
边栏推荐
- thinkphp3.2信息泄露
- Switching value signal anti shake FB of PLC signal processing series
- 印象笔记终于支持默认markdown预览模式
- Unity shader (pass user data to shader)
- 4、 Fundamentals of machine learning
- 面试被问到了解哪些开发模型?看这一篇就够了
- 用flinksql的方式 写进 sr的表,发现需要删除的数据没有删除,参照文档https://do
- Oracle安装增强功能出错
- Netease cloud wechat applet
- Write VBA in Excel, connect to Oracle and query the contents in the database
猜你喜欢
Dynamics 365online applicationuser creation method change
[4G/5G/6G专题基础-146]: 6G总体愿景与潜在关键技术白皮书解读-1-总体愿景
Binary tree high frequency question type
章鱼未来之星获得25万美金奖励|章鱼加速器2022夏季创业营圆满落幕
4、 Fundamentals of machine learning
Deep understanding of UDP, TCP
Elaborate on MySQL mvcc multi version control
PLC信号处理系列之开关量信号防抖FB
# Arthas 简单使用说明
JS reverse tutorial second issue - Ape anthropology first question
随机推荐
flex弹性布局
CDZSC_2022寒假个人训练赛21级(1)
[4G/5G/6G专题基础-146]: 6G总体愿景与潜在关键技术白皮书解读-1-总体愿景
Switching value signal anti shake FB of PLC signal processing series
Gym - 102219J Kitchen Plates(暴力或拓扑序列)
小程序弹出半角遮罩层
消费互联网的产业链其实是很短的,它仅仅承接平台上下游的对接和撮合的角色
# Arthas 简单使用说明
flinkcdc 用sqlclient可以指定mysqlbinlog id执行任务吗
MySQL can connect locally through localhost or 127, but cannot connect through intranet IP (for example, Navicat connection reports an error of 1045 access denied for use...)
2016 CCPC Hangzhou Onsite
JS逆向教程第一发
面试被问到了解哪些开发模型?看这一篇就够了
In fact, it's very simple. It teaches you to easily realize the cool data visualization big screen
小程序滑动、点击切换简洁UI
其实特简单,教你轻松实现酷炫的数据可视化大屏
沙龙预告|GameFi 领域的瓶颈和解决方案
PLC信号处理系列之开关量信号防抖FB
CodeForces - 1324D Pair of Topics(二分或双指针)
Liunx command