css

/** 分享微信,分享朋友圈 **/
.goods_share_mask {
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99999;
transition: transform 0.3s ease-in-out;
.goods_share_box {
border-radius: 10px 10px 0px 0px;
height: 370rpx;
background-color: white;
position: absolute;
bottom: 0;
left: 0;
right: 0;
.title {
text-align: center;
width: 750rpx;
height: 106rpx;
line-height: 106rpx;
font-size: 30rpx;
font-weight: bold;
color: rgba(69, 69, 69, 1);
border-bottom: 1px solid #dddddd;
position: relative;
.close_icon {
position: absolute;
width: 20rpx;
height: 20rpx;
top: 40rpx;
right: 30rpx;
}
}
.content {
height: 263rpx;
display: flex;
.item {
width: 375rpx;
text-align: center;
display: flex;
flex-direction:column;
.img {
width: 80rpx;
height: 80rpx;
margin-top: 70rpx;
}
.text {
font-size: 24rpx;
font-weight: bold;
color: rgba(130, 130, 130, 1);
}
}
}
}
} .goods_share_mask_hidden {
@extend .goods_share_mask;
transform: translateY(100%);
visibility: hidden;
}

html

<!-- 弹出层 -->
<view class="{{hiddenWxShare ? 'goods_share_mask_hidden' : 'goods_share_mask'}}" catch:tap="closeWxShare" catch:touchmove="_stopTap">
<!-- 内容层 -->
<view class="goods_share_box" catch:tap="_stopTap">
<view class="title">
分享至
<image class='close_icon' src="/images/share/close.png" catch:tap="closeWxShare"></image>
</view> <view class="content">
<view class="item">
<view>
<image class='img' src="/images/share/wx.png"></image>
</view> <text class="text">微信好友</text>
</view>
<view class="item">
<view>
<image class='img' src="/images/share/friend.png"></image>
</view>
<text class="text">微信朋友圈</text>
</view>
</view>
</view>
</view>

js

Page({
data: {
hiddenWxShare: true,
},
_stopTap() {
return;
},
closeWxShare() {
this.setData({ hiddenWxShare: true });
},
showWxShare() {
this.setData({ hiddenWxShare: false });
}
});

fixed实现遮罩层,小程序的更多相关文章

  1. 微信小程序开发---逻辑层(App Service)

    再说逻辑层之前,先说说微信小程序框架(MINA) 小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXSS, ...

  2. 逆战:微信小程序开发(二)

    一.常用组件 在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import { req ...

  3. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  4. 微信小程序开发入门

    微信小程序 首先说下结构吧,看看小程序到底长什么样子 这是一个微信提供的自己的开发工具,相当于xcode吧,由此也可以看出腾讯的野心并不小啊,左边的就是编辑调试什么的,往右就是一个模拟器,你可以选择i ...

  5. jQuery遮罩层插件

    在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...

  6. 微信小程序基础

    前言 什么是微信小程序,它是一种轻量级的APP,它与常规App来说,无需下载安装即可使用,它嵌于微信App中,要使用微信小程序你只需要搜索一下微信小程序的名称就好,如近期的"Google的画 ...

  7. 微信小程序开发:学习笔记[7]——理解小程序的宿主环境

    微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器

  8. 【微信小程序】开发实战 之 「开发框架MINA构成」

    小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务. 微信团队为小程序提供的框架命名为MINA.MINA框架通过封装微信客户端提供的文件系统.网络通信 ...

  9. 入门系列(一) 微信小程序简介

    一.简介 1.目录结构 首先,我们使用微信公众平台提供的开发者工具,创建一个简单的小程序项目,观察项目的目录结构 不难看出,一个典型的微信小程序,通常包含一个描述整体的主体部分,以及一个描述页面的 p ...

随机推荐

  1. Go语言学习笔记(2)——零散的话题(反射)

    这部分是<Go语言编程>这本书的第9章的内容.书中给该章节的定位是一个文章集,其包含了一些Go语言中比较少涉及,或是比较深入的讨论的内容.因为第一节就是反射,而反射在我看来是比较重要的内容 ...

  2. 关于SANGFOR AC记录上网记录

    1.查看加密APP的访问记录,不支持推送证书的方式.也就是这种的是没办法查看到的:2.查看加密网站的访问记录,通过推送证书,电脑可以查看到:手机端安卓的不能,苹果可以,但是不建议做,适用性不好:3.查 ...

  3. docker(3)快速搭建centos7-python3.6环境

    前言 当我们在一台电脑上搭建了python3.6的环境,下次换台电脑,又得重新搭建一次,设置环境变量等操作. 好不容易安装好,一会提示pip不是内部或外部命令,一会又提示pip: command no ...

  4. 【论文研读】Sabir, Ekraam, et al. "Recurrent convolutional strategies for face manipulation detection in videos."&#160;Interfaces (GUI)&#160;3.1 (2019).

    #摘要 错误信息通过合成逼真的图像和视频进行传播这一严重问题,需要鲁棒的篡改检测方法来应对.尽管在检测静止图像上的面部篡改方面已付出了巨大的努力,但人们对于通过利用视频流中存在的时序信息,对视频中被篡 ...

  5. Failed to initialize policy for cpu: 0

    今天在使用vmware安装ubuntu16.04的时候出现下列错误: Failed to initialize policy for cpu: 0 (-19),刚开始还以为是镜像文件出现了问题,结果发 ...

  6. Windows10与虚拟机中CentOS-7.2进行ftp通信

    首先Linux的IP地址可以通过以下命令获取: ifconfig Windows10上面IP地址通过下面命令获取 ipconfig 你首先要保证你的主机和Linux虚拟机是可以ping通的(ping都 ...

  7. 2019中国大学生程序设计竞赛(CCPC) - 网络选拔赛(8/11)

    $$2019中国大学生程序设计竞赛(CCPC)\ -\ 网络选拔赛$$ \(A.\hat{} \& \hat{}\) 签到,只把AB都有的位给异或掉 //#pragma comment(lin ...

  8. Codeforces Round #697 (Div. 3) F. Unusual Matrix (思维,数学)

    题意:给你一个矩阵\(a\)和\(b\),你可以对\(a\)的任意一行或任意一列的所有元素xor\(1\)任意次,问最终是否能够得到\(b\). 题解:由\(a\ xor\ b=c\),可得:\(a\ ...

  9. WPF 只读集合在 XAML 中的绑定(WPF:Binding for readonly collection in xaml)

    问题背景 某一天,我想做一个签到打卡的日历.基于 Calendar,想实现这个目标,于是找到了它的 SelectedDates 属性,用于标记签到过的日期. 问题来了. 基于MVVM模式,想将其在xa ...

  10. c#记两个变量进行值交换

    今天腊月二十九啦,无心上班,专注划水.然后就在那里翻帖子消磨时光. 看到了这样一个问题,有人提问为什么   a=b+(b=a)*0  ??? 第一眼看上去,我也有点蒙,仔细推敲了一下,嗯~的确是交换了 ...