精华内容
下载资源
问答
  • 主要为大家详细介绍了微信小程序实现漂亮的弹窗效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本文实例为大家分享了微信小程序实现首页弹出广告的具体代码,供大家参考,具体内容如下 这个微信小程序首页广告demo 仅供有需要的参考 .wxml <!-- 广告展示 --> <view class=bg></view> ...
  • {{content}} 使用定位使得弹窗处于页面中间

    <template>
      <view class="container">
        <view class="box">
          <image class="icon-ok" :src="`${staticUrl}/images/icons/icon-ok.png`" mode="aspectFill"></image>
          <view class="txt">{{content}}</view>
        </view>
        <view class="overlazy"></view>
      </view>
    </template>
    <script>
    export default {
      props: {
        content: {
          type: String,
          default: ''
        }
      },
      
    }
    </script>
    <style lang="scss" scoped>
    .overlazy{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        z-index: 98;
    }
    .container {
      .box {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 55%;
        background: #FFF;
        height: 410rpx;
        border-radius: 8rpx;
        z-index: 99;
        font-size: 0;
        .icon-ok {
          display: block;
          text-align: center;
          margin: 76rpx auto 66rpx;
          width: 132rpx;
          height: 132rpx;
          z-index: 999;
          }
        .txt {
          font-size: 40rpx;
          font-weight: 500;
          color: #0E1210;
          line-height: 56rpx;
          text-align: center;
        }
      }
    }
    </style>

    使用定位使得弹窗处于页面中间

    展开全文
  • 功能:微信小程序,首次进入页面时显示广告弹窗,点击空白处/点击关闭按钮,隐藏此弹窗(7秒后自动隐藏弹窗)。 <!-- 页面的广告图片 --> <view class="modal_new" hidden='{{modal_status}}'> <...

    功能:微信小程序,首次进入页面时显示广告弹窗,点击空白处/点击关闭按钮,隐藏此弹窗(7秒后自动隐藏弹窗)。

    <!-- 页面的广告图片 -->
    <view class="modal_new" hidden='{{modal_status}}'>
    	<image class=" close_btn" src="xxxxx.png" 	bindtap="close_btn"></image>
    	<image src="xxxx.png" class="new_shop_img" mode="widthFix"
    	></image>
    </view>
    <!-- 灰色背景颜色 -->
    <view class="modal_" bindtap="modal_btn" hidden='{{modal_status2}}'></view>
    
    .modal_new{
      width: 50%;
      height: 200px;
      position: fixed;
      top: 25%;
      left: 22%;
      z-index: 21;
    
    }
    .modal_new .close_btn{
      position: absolute;
      top: -25px;
      right: -51px;
      width: 47px;
      height: 50px;
      z-index: 1;
    }
    .new_shop_img{
      position: absolute;
      width: 222px;
    }
    .modal_{
      width: 100%;
      height: 100%;
      background: rgb(0,0,0);
      position: fixed;
      top: 0;
      z-index: 20;
      opacity: .6;
    }
    
    // app.js
      globalData: {
        modal_shop:1,  // 显示首页的广告弹窗
      }
    
    // index.js
    onLoad:function(options){
         var that = this
         // 判断首页的广告层是否显示 (modal_shop == 1 显示 , 7秒后隐藏广告弹窗;如果等于 2 隐藏广告弹窗)
         if(app.globalData.modal_shop== 1){
           that.shop_timer() // 调用定时器方法
         }else{
           that.setData({
             modal_status:true, //  广告弹窗隐藏
             modal_status2:true,// 广告弹窗隐藏
           });
         }
    },
     /**
     * 广告弹窗 7秒关闭(7s定时器)
     */
    shop_timer: function () {
      var that = this;
      setTimeout(function () {
        that.setData({
          modal_status:true, //  新店开业图片隐藏
          modal_status2:true,// 遮罩层隐藏
        });
      }, 7000);
    },
    
    // 如果,跳转其他页面,再次返回首页,还是会出现广告弹窗;所以需要设置 app.globalData.modal_shop 的值,修改成 2
    var app = getApp()
    
    onLoad:function(){
    	 app.globalData.modal_shop = 2 // 首页广告层,显示与隐藏 1 显示 2 隐藏
    }
    
    展开全文
  • 本文为自定义弹窗,该内容可满足如下需求: 自定义各种布局弹窗 点击弹窗布局外消失弹窗 弹出弹窗时背景阴影半透明 各方向弹出效果(本文为自下而上弹出) .wxml 文件中 直接放到wxml的最底部就行了,十分简练。 ...

    本文为自定义弹窗,该内容可满足如下需求:

    • 自定义各种布局弹窗
    • 点击弹窗布局外消失弹窗
    • 弹出弹窗时背景阴影半透明
    • 各方向弹出效果(本文为自下而上弹出)

    .wxml 文件中 直接放到wxml的最底部就行了,十分简练。

    <view class="zan-dialog {{ showDialog ? 'zan-dialog--show' : 'pop_hidden' }}">
     <view class="zan-dialog__mask" bindtap="toggleDialog" />
     <view class="zan-dialog__container">
      <view style='padding:100rpx;'>此处是填充的布局代码</view>
     </view>
    </view>

    .wxss 文件中 直接放进去就行,根据注释可自行调节弹框带不带阴影。

    .zan-dialog__mask {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 10;
     background: rgba(0, 0, 0, 0);
     /* 设置阴影半透明背景如: background: rgba(0, 0, 0, 0.4); */
     display: none;
    }
     
    .zan-dialog__container {
     position: fixed;
     bottom: 400rpx;
     width: 650rpx;
     /* 弹窗布局宽 */
     height: 350rpx;
     /* 弹窗布局高,与下面弹出距离transform有关 */
     margin-left: 50rpx;
     background: #f8f8f8;
     transform: translateY(300%);
     /* 弹框弹出距离,与弹框布局高度有关,如300%表示弹起距离为3倍弹窗高度 */
     transition: all 0.4s ease;
     z-index: 12;
     border-radius: 20rpx;
     box-shadow: 0px 3px 3px 2px gainsboro;
     /* 弹框的悬浮阴影效果,如不需要可注释该行 */
    }
     
    .zan-dialog--show .zan-dialog__container {
     transform: translateY(0);
    }
     
    .zan-dialog--show .zan-dialog__mask {
     display: block;
    }
    /*隐藏*/
    .pop_hidden{
      display: none;
    }

    .js 文件中 处理弹框弹出消失逻辑,以及自定义弹窗里的业务逻辑。

    Page({
     data: {
      showDialog: false
     },
     
     /**
     * 控制 pop 的打开关闭
     * 该方法作用有2:
     * 1:点击弹窗以外的位置可消失弹窗
     * 2:用到弹出或者关闭弹窗的业务逻辑时都可调用
     */
     toggleDialog() {
      this.setData({
       showDialog: !this.data.showDialog
      });
     },
    
    })

     

    展开全文
  • 记录一个类似支付密码的弹窗写法,实现是否免密功能。如图: index.js import Taro, { Component } from '@tarojs/taro' import { View, Button, Text } from '@tarojs/components' import { AtInput...

    记录一个类似支付密码的弹窗写法,实现是否免密功能。如图:

    index.js

     
      
      import Taro, { Component } from '@tarojs/taro'
      import { View, Button, Text } from '@tarojs/components'
      import { AtInput, AtList, AtListItem, AtIcon, AtButton,AtToast} from "taro-ui"
      import './index.scss'
    class Index extends Component {
      constructor() {
        super(...arguments)
        this.state = ({
          switchIsCheck: false,
          showPayPwdInput: false,
          payFocus: true,
          pwdVal: '',
    toastText: '',
    isOpened: false
        })
      }
    // 打开关闭免密  用了在Switch开关上面遮挡一个透明的View,来显示弹窗,控制Switch的开关
      switchIsCheckBtn = () => {
        this.setState({
          showPayPwdInput: true
        })
      }
      closeClick = () => {
        this.setState({
          showPayPwdInput: false
        })
      }
      // 检验密码 输完6位数字密码时候调用
      hidePayLayer = () => {
        let val = this.state.pwdVal
    this.setState({ showPayPwdInput: false, pwdVal: '' }, () => { Taro.request({ method: 'post', url: API.URL, header: { 'Content-Type': 'application/json', 'Data-Type':'json', 'weixinauth': this.state.tookenData }, data:JSON.stringify({ password:val }), success: res => { if (res.data.status == 0) { this.setState({ switchIsCheck: !this.state.switchIsCheck }) }else{ this.setState({ isOpened: true, toastText: '密码错误' }) } } }) }) } // 密码输入 inputPwd = (e) => { this.setState({ pwdVal: e.detail.value },() => { if (e.detail.value.length >= 6) { this.hidePayLayer() } }) } render() {
    const {isOpened, toastText} = this.state
    return ( <View className='box-passward'> <View className="password-top"> <View className="no-password"> <AtList> <AtListItem title='密码' extraText='●●●●●●' arrow='right' onClick={this.handleClickChange} /> <AtListItem switchColor='#40ac4b' title='我要免密' isSwitch onSwitchChange={this.handleChange} switchIsCheck={this.state.switchIsCheck} /> <View className="password-btn" onClick={this.switchIsCheckBtn}></View> </AtList> <View className='forget-password' onClick={this.forgetPwd}>忘记密码?</View> </View> </View> { this.state.showPayPwdInput ? <View className="dialog"> <View className="input_main"> <View className="input_title"> <AtIcon onClick={this.closeClick} value='close' size='18'className="input_title-close"></AtIcon> <Text>免密修改</Text> </View> <View className="write-title">请输入密码</View> <View className="input_row"> { [0,1,2,3,4,5].map((item,index) => { return ( <View key={index} className="pwd_item"> { this.state.pwdVal.length>index ? <Text className="pwd_itemtext"></Text> : null } </View> ) }) } </View> <Input focus={this.state.payFocus} password type="number" maxLength="6" onInput={this.inputPwd} className="input_control"></Input> </View> </View> : null }
              <AtToast isOpened={isOpened} duration={1000} text={toastText} onClose={this.handleClose}/>
          </View>
        )
      }
    }
    export default Index
     

    index.scss

    .box-passward {
      display: flex;
      flex-direction: column;
      height: 100vh;
      background: #f2f2f2;
        .signature-passward-bg {
          background: linear-gradient(#21b459, #24a262);
          position: relative;
        }
        .tabContant-certificate {
            padding-top: 22%;
            .image-certificate{
                width:360px;
                height: 360px;
                margin:0 auto;
                image{
                   width: 100%;
                   height: 100%;
                }
            }
            .text-certificate{
                font-size:30px;
                width:508px;
                margin:0 auto;
            }
        }
        .password-top{
          margin-top:32px;
          .no-password{
            .at-list__item .item-extra__info{
              font-size: 24px;
            }
          }
          .at-list{
             border-top: 1px solid #e5e5e5;
             border-bottom: 1px solid #e5e5e5;
          }
          .password-btn{
             width:105px;
             height: 70px;
             position: absolute;
             right:35px;
             bottom:20px;
          }
          .forget-password{
             padding:20px;
             color:#40ac4b;
             font-size: 28px;
          }
          .my-body {
            .account-tip {
               width: 100%;
               color: #888;
               font-size: 28px;
               line-height: 50px;
               padding: 0 30px 20px;
               font-family: "PingFang-SC-Medium";
              .active{
                 color: #40ac4b;
                 font-size: 26px;
              }
            }
            .my-body-content {
               background-color: #fff;
               border-top:1px solid #e5e5e5;
               border-bottom:1px solid #e5e5e5;
            }
            .at-button{
               margin:60px 30px;
            }
          }
        }
      .dialog {
         width: 100%;
         height: 100%;
         position: fixed;
         left:0;
         top:0;
         z-index: 1222;
         background: rgba(0,0,0,0.5);
        .input_main {
          position: fixed; 
          left: 50%; 
          bottom: 50%;
          margin-bottom:-180px;
          margin-left: -45%; 
          width: 90%; 
          height: 360px;
          background-color: #fff; 
          z-index: 1223;
          border-radius: 10px;
          .input_title {
            width: 100%; 
            height: 135px; 
            line-height: 135px; 
            text-align: center; 
            font-size: 40px; 
            .input_title-close{
              color:rgb(153,153,153);
              float: left;
              margin-top:50px;
              margin-left: 40px;
            }
            .input_back {
              position: absolute; 
              left: 0; 
              top: 0;
              width: 80px; 
              height: 90px; 
              display: flex; 
              justify-content: center; 
              align-items: center;
              .input_backtext {
                width: 20px;
                height: 20px;
                background-color: white;
                border: 2px solid #aaa;
                border-width: 5px 0 0 5px;
                transform: rotate(-45deg);
              }
            }
          }
          .write-title{
            color:rgb(102,102,102);
            font-size: 30px;
            padding-left:40px;
            margin-bottom: 30px;
          }
          .input_row {
            width: 88%; 
            margin: 0 40px; 
            height: 98px; 
            position: relative;
            display: flex; 
            align-items: center; 
            border: 2px solid rgb(229,229,229); 
            .pwd_item{
              flex: 1; 
              display: flex; 
              align-items: center; 
              justify-content: center; 
              height: 100%; 
              border-right: 2px solid rgb(229,229,229); 
              position: relative;
              .pwd_itemtext {
                width: 30px; 
                height: 30px; 
                border-radius: 30px; 
                background-color: #555;
              }
            }
            .pwd_item:last-child { 
              border-right: none; 
            } 
          }
          .forget_pwd {
            float: right; 
            margin: 30px; 
            width: 100px; 
            text-align: right; 
            font-size: 24px; 
            color: #ff7800;
          }
          .input_control {
            position: relative; 
            left: -300px; 
            bottom: 0; 
            width: 100px; 
            height: 100px;
          }
        }
      }
    }

     

    转载于:https://www.cnblogs.com/juewuzhe/p/11244083.html

    展开全文
  • 效果图: 微信小程序之----弹框组件modal modal
  • 点击弹窗按钮则弹出信息,点击右上角关闭按钮则关闭弹出层,弹出后遮盖层部分不可点击,无上拉下滑操作。用作于提示,展示列表,添加内容等操作。
  • 微信小程序今年新上线了插屏广告,设置和在代码库中接入都非常方便。详细可见微信小程序官方文档。 大体的流程就是在小程序后台新建广告位,获取到广告位的adUnitId并嵌入到源代码,因为插屏广告的单页面性,在页面...
  • 微信小程序 首页弹出广告的demo

    千次阅读 2020-01-29 15:22:12
    这个微信小程序首页广告demo 仅供有需要的参考 .wxml <!-- 广告展示 --> <view class="AdView" hidden="{{showAd}}" catchtouchmove="preventMove"> <view class="bg" ></view> <...
  • 自定义Toast,类似Android的Toast
  • 小程序之页面弹窗

    2018-12-06 15:17:30
    module页面传取,底部弹出视图,顶部提示,角标,商品数量加减
  • 公司有需求做一个广告弹窗,但是小程序现有的弹窗样式太固定,无法满足需求,于是就手动写了个弹窗。之后发现自己写的小程序弹窗出现以下问题: 页面可以滚动。也就是说弹窗只遮住了100vh(视窗高度),然后页面滑动...
  • 资源描述资源描述资源描述:微信小程序自定义下拉框,点击空白处隐藏
  • 微信小程序中的各种弹窗API

    千次阅读 2019-07-25 19:28:58
    <button bindtap="popConfirm">confirm的弹窗 加载弹窗 选择框弹窗 //test.js Page({ popSuccessTest: function () { wx.showToast({ title: '成功提示弹窗', icon: '', //默认值是success,就算没有...
  • 微信小程序 用fixed设置弹窗蒙层,当弹窗和内容都存在滚动时,滑动弹窗蒙层,下面的页面会有滚动。 希望的效果是弹窗内能正常滚动,滑动弹窗蒙层,下面页面不会产生滚动。 例如:页面上内容也有滚动,弹窗里有展示...
  • 微信小程序修改样式弹框wx.showModal

    千次阅读 2020-06-12 17:11:57
    由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框。 wx.showModal修改样式后的效果,如下图所示: ...
  • 这篇文章对于熟悉小程序开发的人或者说熟悉开发文档的人来说简直就是鸡肋,因为没有技术性可言。不过,对于像我这种入门者而且没有多看文档的人来说,多少会有些用,思考再三还是写篇文章记录下好了,没有恶意刷存在...
  • .rules_modal_cont{ height:800rpx; width:200rpx; -webkit-animation: showZeroAlert ...动画效果就是先变大再变,有一个“弹”的动作~ 转载于:https://www.cnblogs.com/Basu/p/8677326.html
  • 温馨提示:小程序需要开通流量主(即1000UV)才可以显示广告效果亲测一个每日活跃用户800人的小程序,每天广告收益在60-100之间,广告收益多少取决于您小程序的活跃用户数量,UV不够的可以暂时不放广告发布如果是新...
  • 微信小程序 自定义弹框 遮罩

    千次阅读 2018-05-22 09:48:33
    /*弹窗 */ .bg{ width: 100%; height: 100%; position: fixed; top: 0rpx; left: 0rpx; background: rgba(0, 0, 0, 0.6) } .bg-alert{ width:560rpx; height: 320rpx; background-color: #fff; border-...
  • 微信小程序中点击按钮开放能力无法弹出微信授权弹窗 <view class="getuserinfo"> <button open-type="getUserInfo" type="primary">用户授权2221</button></view> 清除缓存就可以了 ...
  • 微信小程序自定义弹框功能实现

    千次阅读 2018-12-28 14:13:04
    微信小程序自定义弹框功能实现 先上图 .wxml &lt;view class='tk' bindtap="wqd"&gt; 点击弹出 &lt;/view&gt; &lt;!-- 遮罩层 --&gt; &lt;view class="mask&...
  • 2018年7月9日,微信团队公布微信小程序广告组件全量开放的公告:“ 小程序(含小游戏类目)广告组件全量开放,开发者可在小程序后台自助申请开通流量主,开通后可在小程序中接入广告,按月获得广告收入。...
  • 文档位置:微信官方文档小程序—》开发—》API—》媒体—》视频—》VideoContext。 使用方法: 注意我这个是自定义组件写法: wxml: <view class="video-wrap-info"> <video class="my-video" id...
  • 微信小程序开发—弹出框

    千次阅读 2018-01-08 14:39:05
    模态弹窗 操作菜单 1.消息提示——wx.showToast(OBJECT) //show.js //获取应用实例 var app = getApp() Page({ showok:function() { wx.showToast({ title: '成功', icon: '...
  • 小程序进入首页时弹出广告

    千次阅读 2020-11-20 11:27:51
    项目需求,判断用户是否开通会员,没开通会员的话每次进入小程序弹出一个引导开通会员的弹窗,已经开通会员的不在弹 先看下效果图 wxml代码 <!-- 广告展示 --> <view class="mask" hidden="{{showAd}}"&...
  • 目前微信小程序针对个人来说广告是最好的变现方式,广告主要分为: 1.Banner 2. 激励式视频 3. 插屏 Banner广告很简单,插入代码就可以显示 这里介绍下激励式视频广告实现(观看完整广告奖励积分): //视频...
  • 从今天开始就来带领大家学习微信小程序了,只要你跟着我一步步来,相信你也可以上线一款属于自己的微信小程序 一,认识小程序 微信⼩程序,简称⼩程序,英⽂名 Mini Program Mini Program ,是⼀种不需要下载安装...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,333
精华内容 533
关键字:

微信小程序广告弹窗

微信小程序 订阅