微信小程序实现弹出层效果

2024-10-13 20:12:47

本文实例为大家分享了微信小程序实现弹出层效果的具体代码，供大家参考，具体内容如下

先看下效果图吧

其实这个效果实现起来很简单，就是通过三目运算符来控制遮罩层的显示和隐藏

贴代码了：

规则按钮：

<text class='rule' bindtap='showRule'>规则</text>

遮罩层：我这个数据是从后台拿来动态渲染到页面的

<!-- 规则提示 -->
  <view class="ruleZhezhao {{isRuleTrue?'isRuleShow':'isRuleHide'}}">
    <view class='ruleZhezhaoContent'>
      <view class='ruleZhezhaoText' wx:for='{{rule}}' wx:for-index='index'>
        <text>{{index+1}}</text>
        <text>{{item}}</text>
      </view>
      <image src='../../images/rule-hide.png' class='ruleHide' bindtap='hideRule'></image>
    </view>
  </view>
  <!-- end -->

css:

/* 规则提示层 */
.isRuleShow{
  display: block;
}
.isRuleHide{
  display: none;
}
.ruleZhezhao{
  height: 100%;
  width: 100%;
  position: fixed;
  background-color:rgba(0, 0, 0, .5);
  z-index: 2;
  top: 0;
  left: 0;
}
.ruleZhezhaoContent{
  padding: 20rpx 0;
  width: 80%;
  background: #e1d2b1;
  margin: 40% auto;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
}
.ruleZhezhaoText{
  width: 80%;
  font-size: 30rpx;
  color: #856d5f;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 25rpx 0 25rpx 0;
}
.ruleZhezhaoText text:nth-child(1){
  color: #fff;
  font-size: 40rpx;
  height: 60rpx;
  width: 60rpx;
  background: #664a2c;
  display: block;
  text-align: center;
  line-height: 60rpx;
  border-radius: 30rpx;
  margin-right: 10rpx;
}
.ruleZhezhaoText text:nth-child(2){
  flex-wrap:wrap;
  width: 80%;
}
.ruleHide{
  height: 60rpx!important;
  width: 60rpx!important;
  position: absolute;
  top: -20rpx;
  right: -20rpx;
}
.rule{
  display: block;
  border: 1px solid #fff;
  width: 100rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  height: 60rpx;
  font-size: 30rpx;
  border-radius: 30rpx;
  position: absolute;
  top: 10%;
  right: 5%;
}
/* end */

点击规则按钮：

//打开规则提示
  showRule: function () {
    this.setData({
      isRuleTrue: true
    })
  },

点击关闭按钮：

//关闭规则提示
  hideRule: function () {
    this.setData({
      isRuleTrue: false
    })
  },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

如何阻止小程序遮罩层下方图层滚动

这篇文章主要介绍了如何阻止小程序遮罩层下方图层滚动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下原因是因为: touchmove事件冒泡: 解决方案: 阻止遮罩层冒泡,在小程序里面利用catch+事件名就可以阻止冒泡, 所以在遮罩层填上事件 catchtouchmove="preventdefault" 小程序1.5.0后可以写上 capture-catch:touchmove="preventdefault"
微信小程序实现卡片层叠滑动效果

本文实例为大家分享了微信小程序之卡片层叠滑动效果的具体代码,供大家参考,具体内容如下代码: js: // index/gun/jsSwiper2/jsSwiper2.js Page({ /** * 页面的初始数据 */ data: { startX: 0, endX: 0, iCenter: 3, datas: [{ id: 1, zIndex: 2, opacity: 0.2, left: 40, iamge: "../../images/1.jpg", animation: nu
微信小程序实现锚点定位楼层跳跃的实例

微信小程序实现楼层锚点跳跃,点击不同的锚点进行位置跳跃: 利用:scroll-into-view 来实现效果图如下: WXML: <scroll-view class="content" scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true"> <view wx:for="{{act_addList}}&
微信小程序textarea层级过高(盖住其他元素)问题的解决办法

前言:这篇文章讲什么微信小程序中 textarea 组件的层级过高如何解决前言:这篇文章对谁有用微信小程序开发者前言:本文有什么用? 提供解决问题的思路,供你参考 (因为时间关系,我没法把代码整理的好好的然后贴出来让你复制黏贴.或者是做成一个组件然后开源) 前言:本文时效性截止至2018年10月30号,微信的 textarea 还是以原生组件形式实现,因此层级最高.无法通过 z-index 进行调整.在微信小程序官方把 textarea 改成了可以控制层级之前.本文中的内容会一直有效.
微信小程序自定义tab实现多层tab嵌套功能

小程序最近是越来越火了-- 做小程序有一段时间了,总结一下项目中遇到的问题及解决办法吧. 项目中有个多 tab 嵌套的需求,进入程序主界面下面有两个 tab,进入A模块后,A模块最底下又有多个tab,每个tab上又嵌了2-4个不等的tab... 这种变态需求只能自定义tab了. 其实如果项目不是很复杂,没有多tab嵌套的需求,完全可以用小程序官方的 tabBar,方便快捷. 官方 tabBar 地址:https://developers.weixin.qq.... 一.Demo结构先看效果图吧
小程序显示弹窗时禁止下层的内容滚动实现方法

小程序显示弹窗时禁止下层的内容滚动实现方法,具体如下 ① 第一种方式利用position:fixed. 禁止页面滚动. 一. 页面结构html <view class="indexPage {{proInfoWindow?'indexFixed':''}}"> -----------此处为整个页面的结构内容 <button catchTap="_proInfoWindowShow">点击显示弹窗</button> <
微信小程序textarea层级过高的解决方法

一.前言相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡住,很影响用户体验, 目前官方对该问题还没有修复,当然官方也给出了解决该问题的其他方案,使用cover-view和 cover-image替代,但个人感觉并不是很好,有一些限制二.使用场景及解决方案 1.弹窗显示 2.底部fixed定位的按钮,页面滚动时,例如添加购物车,显示价格针对以上两种业务
微信小程序实现弹出层效果

本文实例为大家分享了微信小程序实现弹出层效果的具体代码,供大家参考,具体内容如下先看下效果图吧其实这个效果实现起来很简单,就是通过三目运算符来控制遮罩层的显示和隐藏贴代码了: 规则按钮: <text class='rule' bindtap='showRule'>规则</text> 遮罩层:我这个数据是从后台拿来动态渲染到页面的  <view class="ruleZhezhao {{isRuleTrue?'isRuleS
微信小程序自定义弹出层效果

本文实例为大家分享了微信小程序实现弹出层效果的具体代码,供大家参考,具体内容如下效果图 WXML <view class='popup' wx:if="{{popShow}}"> <view class='mask' catchtouchmove="preventTouchMove" catchtap='closePop'> </view>  <view class='popup_mai
微信小程序自定义弹出模态框禁止底部滚动功能

图示: wxml代码: <view class='fix_bottom'> <view>分享</view> <view>电话咨询</view> <view class='active' bindtap="showDialogBtn">立即报名</view> </view>   <view class="mod
微信小程序实现弹出菜单

本文实例为大家分享了微信小程序实现弹出菜单的具体代码,供大家参考,具体内容如下菜单代码: 1.index.js //index.js //获取应用实例 var app = getApp() Page({ data: { isPopping: false,//是否已经弹出 animationPlus: {},//旋转动画 animationcollect: {},//item位移,透明度 animationTranspond: {},//item位移,透明度 animationInput: {
微信小程序实现弹出菜单功能

需求点击标签栏按钮,向下弹出菜单,再次点击,收回菜单要解决的问题标签栏三栏样式,标签栏固定不动: 点击标签栏弹出菜单,并且出现透明遮罩: 遮罩优先级在弹出框之下: 弹出框内标签的设置: 滚动栏滚动条的隐藏如何解决? 弹性布局,横向,三者平分整栏; 状态监听点击事件,数据控制hide或者show,通过rgba设置透明度弹出框设置z-index: 弹性布局flex 横向排列超出后wrap 然后space-around控制间距 ::-webkit-scrollbar { width: 0;
微信小程序实现弹出框提交信息

本文实例为大家分享了微信小程序实现弹出框提交信息的具体代码,供大家参考,具体内容如下 <view class="navSm" bindtap="toolNo"> <image src="../../images/idx4.png" class="mavimg" mode="aspectFit"></image> <view class=&qu
小程序自定义弹出框效果

本文实例为大家分享了小程序自定义弹出框效果的具体代码,供大家参考,具体内容如下 my-pop----api: title ------字符串---------自定义弹窗标题context ------字符串---------自定义弹窗内容cancelTxt ------字符串---------取消按钮文本cancelCor ------字符串---------取消按钮颜色inp ------布尔值---------true文本弹出框---------fasle默认弹出框okTxt ------字
微信小程序实现弹出菜单动画

微信小程序动画之弹出菜单,供大家参考,具体内容如下效果图 js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTranspond: {}, animInput: {}, animCloud:{}, aninWrite:{}, }, //点击弹出 plus: function () { if (this.data.isPopping) { //缩回动画 this.popp(); this.setData(
微信小程序实现弹框效果

本文实例为大家分享了微信小程序实现弹框效果的具体代码,供大家参考,具体内容如下先上代码 wxml部分: <view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'> <text>向上弹起</text> </view> <view class='top' bindtap='powerDrawer' data-statu="open&quo
微信小程序自定义弹框效果

本文实例为大家分享了微信小程序自定义弹框效果的具体代码,供大家参考,具体内容如下 wxml  <view class="cancelBtn" bindtap="cancelOrder" data-id="{{item.id}}" data-type="{{type}}">取消订单</view>  <view cla

微信小程序实现弹出层效果

相关推荐

随机推荐