精华内容
下载资源
问答
  • 首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况。 解决思路: 1.通过子页面调用...

    首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况。

    解决思路:

    1.通过子页面调用父页面的方法,因为在子页面开始渲染的时候,你的父页面肯定是已经渲染好了的,前提这里的方法中是去找寻父页面的标签。

    2.直接在本页面监视一个参数,发现参数被初始化了,说明页面也已经加载完成,因为你的页面用到了这个参数。

     

    方法1案例:tab页里的子页面如果没有内容就隐藏

    父页面代码

    <el-tabs v-model="initTab" type="card">
      <el-tab-pane label="1信息" name="tab1">
        1
      </el-tab-pane>
      <el-tab-pane label="2报告" name="tab2">
        2
      </el-tab-pane>
      <el-tab-pane label="3信息" name="tab3">
        3
      </el-tab-pane>
      <el-tab-pane label="4信息" name="tab4">
        <ziyemian-group @tabShow="tabShow" title="4信息" v-if="detailInfo">
        </ziyemian-group>
    
      </el-tab-pane>
      <el-tab-pane label="5信息" name="tab5">
        5
      </el-tab-pane>
      <el-tab-pane label="其它信息" name="tab6">
        6
      </el-tab-pane>
    </el-tabs>
    
    import ZiyemianGroup from './ZiyemianGroup.vue'
    components: {
      ZiyemianGroup
    },
    data () {
        return {
            detailInfo: {},
            initTab:‘tab1’
        }
    }
    methods: {
      tabShow: (data) => {
        document.getElementsByClassName('el-tabs__item').item(4).style.display = data
      },
    }

    然后是ZiyemianGroup.vue的代码,这里主要就是方法调用,页面自己搞定

    data () {
      return {
        list: []
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init() {
        if (list.length > 0) {
            this.$emit('tabShow', 'inline')
        } else {
            this.$emit('tabShow', 'none')
        }
      )
    }

    list是子页面的内容,这样如果子页面没有内容就可以隐藏掉了

     

    方法2案例:我这边需要tab页隐藏

    <el-tabs v-model="initTab" type="card">
      <el-tab-pane label="1信息" name="tab1">
        1
      </el-tab-pane>
      <el-tab-pane label="2报告" name="tab2">
        2
      </el-tab-pane>
      <el-tab-pane label="3信息" name="tab3">
        3
      </el-tab-pane>
      <el-tab-pane label="4信息" name="tab4">
        <ziyemian-group title="4信息" v-if="detailInfo">
        </ziyemian-group>
    
      </el-tab-pane>
      <el-tab-pane label="5信息" name="tab5">
        5
      </el-tab-pane>
      <el-tab-pane label="其它信息" name="tab6">
        6
      </el-tab-pane>
    </el-tabs>
    
    import ZiyemianGroup from './ZiyemianGroup.vue'
    components: {
      ZiyemianGroup
    },
    data () {
        return {
            detailInfo: {},
            initTab:‘tab1’
        }
    }
    watch: {
      detailInfo: function () {
        this.$nextTick(function () {
          this.tabShow()
        })
      }
    },
    methods: {
        tabShow () {
            document.getElementsByClassName('el-tabs__item').item(6).style.display = 'none' // 隐藏tab6
        }
    }

    nextTick方法,意思是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

    隐藏tab的方法我用了原生js,因为vue生成后的页面和写的vue页面有所差别,所以我直接用了最笨的方法进行匹配。

    展开全文
  • js 关于页面加载时 Loading效果 包括刷新 按钮点击
  • 关于页面input导致页面可滑动问题(iOS上) 安卓关于弹出键盘问题可以用resize解决 解决方案:滑动页面的时候让对应的input失去焦点(默认滚动不失去焦点) 1.给input组件添加获取焦点事件,并传人对应input的参数...

    关于页面input导致页面可滑动问题(iOS上)

    安卓关于弹出键盘问题可以用resize解决
    解决方案:滑动页面的时候让对应的input失去焦点(默认滚动不失去焦点)

    1.给input组件添加获取焦点事件,并传人对应input的参数

    @onFocus="onFocus(0)"  //input绑定获取焦点事件

    2.追加事件

    onFocus(val){  //获取焦点事件
    this.isScroll=true
       setTimeout(()=>{
                if(this.isScroll){
                  this.inputName=val
                  window.addEventListener('scroll', this.scrollEvent);
                }
              },800)
     }, 
      scrollEvent(){  //滚动事件
       var input1 =document.getElementsByClassName('inputState')[this.inputName]
       input1.blur()
       window.removeEventListener('scroll', this.scrollEvent);
     },
     getBlure(){  //失去焦点事件(过快失去焦点的时候不去绑定事件)
              this.isScroll=false
          },

    如果页面有多个input,需要在input失去焦点或者其判断事件触发后移除滚动事件

    3.销毁

       destroyed() {    //清除scroll事件
          window.removeEventListener('scroll', this.scrollEvent);
        },

    转载于:https://www.cnblogs.com/liuhuanwen/p/8818767.html

    展开全文
  • mui关于页面间传值的方法

    千次阅读 2016-03-25 18:36:29
    mui手机开发关于页面间传值的方法
    2016/3/25
    方法0:fire传值
    	mui.openWindow({
    			url:'road_lineWindCar.html', 
    			id:'road_lineWindCar.html',
    			waiting:{
    			 autoShow:false
    			 },
    			extras:{
    			  car:this.getAttribute("car"),   //这里的值可以是你在函数体里的具体的值,我这里是把这些值写在(li)标签里的属性
    			  hcCityName:this.getAttribute("hcCityName"),
    			  qcStoreName:this.getAttribute("qcStoreName")
    			}
    		})
    
    
    	在预加载里写
    	mui.plusReady(function(){
    		var car = plus.webview.currentWebview().car;
    		var hcCityName = plus.webview.currentWebview().hcCityName;
    		var qcStoreName = plus.webview.currentWebview().qcStoreName;
    		})
    
    
    方法1:mui实现页面间传值:fire传值  这种方法传值,有可能传不过去
    
     
      第一步:要有目标页面
      var roadLinePage = plus.webview.getWebviewById('choose_car.html');
      第二步:要有自定义事件 其中getQcCity就是事件
      mui.fire(roadLinePage,'getQcCity',{
    				    qcCityName:cityName,
    				    qcCityId:cityId
    				  });
      第三部:要在目标页面监听事件getQcCity
      window.addEventListener('getQcCity',function(event){
    			//获得事件参数
    			var id = event.detail.qcCityId;//获取传过来的值
    			document.getElementById("qcCity_").value=id;
    			console.log("取车城市"+id);
    			freshCarTable();//要执行的函数
    			});
    
    
    
    
    方法2:
    本地存储--存储json格式的数据
    	localStorage.setItem(name, JSON.stringify(value));
    
    
    	var obj = localStorage.getItem(name);
            return mui.parseJSON(obj);
    
    
    	/**
     * 本地存储Utils
     */
    var localStorageUtils = {
        setParam: function (name, value) {
            if (value) {
                localStorage.setItem(name, JSON.stringify(value));
            }
        },
        getParam: function (name) {
            var obj = localStorage.getItem(name);
            return mui.parseJSON(obj);
        },
        removeParam: function (key) {
            return localStorage.removeItem(key);
        }
    }
    
    
    H5+中本地存储使用--
    方法:3:
    获取应用存储区中保存的键值对的个数
    var foo = plus.storage.getLength();
    修改或添加键值(key-value)对数据到应用数据存储中
    void plus.storage.setItem(key, value);
    通过键(key)检索获取应用存储的值
    var foo = plus.storage.getItem(key);
    通过key值删除键值对存储的数据
    void plus.storage.removeItem(key);
    清除应用所有的键值对存储数据
    void plus.storage.clear();
    获取键值对中指定索引值的key值
    var foo = plus.storage.key(index);
    var keyNames=[];
    var values=[];
    var numKeys=plus.storage.getLength();
    for(var i=0; i<numKeys; i++) {
        keyNames[i] = plus.storage.key(i);
        values[i] = plus.storage.getItem(keyNames[i]);
    }

    展开全文
  • nuxt.js 关于页面中css 提取到 link的方法 说明: 关于nuxt.js的资料并不是很多,有时候遇到个很简单的问题,百度或者谷歌都不是很容易找到。 其实这个问题就很简单,但是也让我浪费了很多时间,所以在此共勉。 ...

    ~ 重要的事情说三遍 ~

    版本为: “nuxt”: “^1.0.0”, 高版本早日略过吧


    版本为: “nuxt”: “^1.0.0”, 高版本早日略过吧


    版本为: “nuxt”: “^1.0.0”, 高版本早日略过吧


    说明:

    关于nuxt.js的资料并不是很多,有时候遇到个很简单的问题,百度或者谷歌都不是很容易找到。

    其实这个问题就很简单,但是也让我浪费了很多时间,所以在此共勉。


    正题:

    下面这张图片就是提取之后的样子,所有css 都放到了/nuxt/app.XXX.css中了。

    这里写图片描述

    功能实现:

    只有一个步骤
    只有一个步骤
    只有一个步骤

    重要的事情说三遍,那就是在nuxt.config.js下的build里添加 extractCSS: { allChunks: true }这句话。稍后具体说明;

    这里写图片描述

    有的盆友会发现,npm run dev 后没有任何变化,不要着急,试下npm run build; npm start;这样一定成功了吧;(只有生产环境下有效

    原理

    在文档中有提到webpack的配(https://github.com/nuxt/nuxt.js/tree/master/lib/builder/webpack);

    打开连接你会发现,有这样两个js:“base.config.js”,“style-loader.js”;

    这里写图片描述

    这里写图片描述

    其实nuxt.js 自己本身已经集成了extract-text-webpack-plugin这个插件;
    只是extractCSS默认为false;

    具体代码比较简单就不解释了;

    展开全文
  • 关于页面嵌入swf覆盖div层的问题

    千次阅读 2014-02-10 17:01:11
    关于页面嵌入swf覆盖div层的问题 如果swf是通过方式插入的话,那就加入以下这断代码 还有一种方法是通过script_swfobject.js插件来插入swf的,这时用下面的方法来设置: var so = new ...
  • 我的项目是主页面再activity上使用来懒加载的viewpage 最后一页是个人中心,在这页点击登陆打开登陆页面 我登陆成功后发送广播 然后在个人中页重新调用initview initdata结果是代码执行了 而页面却没有更新,求教 ...
  • location-href关于页面刷新

    千次阅读 2017-12-18 15:31:31
    js中location.href的用法... self.location.href="/url" 当前页面打开URL页面  ocation.href="/url" 当前页面打开URL页面  windows.location.href="/url" 当前页面打开URL页面,前面三个用法相同。  this.location.
  • electron关于页面跳转 的问题

    千次阅读 2019-10-04 03:52:42
    刚开始看到页面跳转,大家一般会想到用window.location.href = './index.html';这样的代码。结果是可以跳转,但 DOM事件 基本都会失效。到最后还是使用的 electron 提供的 ipc 接口来创建新的窗口。 2-0、在接收到...
  • 关于页面跳转同时传参: 1.执行后台方法存参数于session中 2.通过将参数拼接于URL 安全性考虑: 第二种的安全性肯定不好了,关于session的安全性有待考证(多学习一点) 参考文章1
  • 关于页面向下滚动到元素位置,元素停靠顶部不动,当页面向上滚动到元素位置时,元素回到原来位置的效果,思路很简单,就是监听window滚动,获取元素到页面顶部位置,如果页面滚动距离大于元素到顶部距离,那么添加...
  • 分享关于页面跳转和流量统计的问题。 发布于 2011 年 8 月 29 日 by chiefoforc | 编辑 9 comments 难得能发个技术贴!!! ... language=”JavaScript”>
  • python-appium,关于页面滑动的操作

    千次阅读 2019-07-27 17:19:25
    第一种: 滑到底部 js=&amp;amp;amp;quot;var q=document.documentElement.scrollTop=100000&amp;amp;amp;quot; driver.execut_script(js) ...目前在firefox,chrome上验证都是可以跑通的 ...
  • 暂时的解决方法有两种,亲测有效: 方法一: 将页面跳转方式由a标签改为请求转发request.getRequestDispatcher("stu_list.jsp").forward(request, response),然后用EL表达式在页面获取。...关于方法二的解释:r...
  • 关于页面响应时间

    万次阅读 2008-11-25 17:06:00
    用户浏览网站的网页响应时间公式:页面大小------------ +(往返时间x轮流交替)+服务器进程时间+客户端进程时间=页面响应时间最小带宽1.页面大小:是由 Kbytes 来衡量的。有许多方式来确定网页的大小。 一个有用的...
  • 用html5调用摄像头截图的,之前用的时候是可以的,现在不知道怎么不行了,摄像头调用不了,js报错:getUserMedia() no longer works on insecure origins.... var video = document.getElementById("video");...
  • 几种关于页面乱码的处理方式

    千次阅读 2018-03-24 22:39:04
    最近在做一个秒杀功能模块,在前台调试过程中出现了好多乱码的情况,下面就前端页面乱码情况的处理方式做一下总结:1.url地址栏含中文时的提交乱码处理方式:修改tomcat下conf的server.xml文件:添加URIEncoding=&...
  • 关于页面有太多图片,加载慢问题

    万次阅读 2018-08-20 20:20:37
    一个页面上有大量的图片,加载很慢,你如何优化? 1.图片为css图片: 可以使用:CSSsprite,SVGsprite,Iconfont,Base64(精灵图,小图标…) 2.图片过大: 可以使用特殊编码图片,先加载一张压缩特别厉害的...
  • 微信小程序关于页面不跳转的问题

    千次阅读 2018-03-13 15:07:30
    wx.navigateTo(),wx.redirectTo()等进行页面跳转的情况下,在app.json中tabbar中就不能存在跳转的标签;第一种解决方法:将tabbar中对应的标签删除掉,才能够跳转第二种解决方法:将导航的跳转方式修改成reLaunch或者...
  • 对于前台页面来说,通常为了访问的方便会使用get的方式进行表单提交,这样进行页面分享或者发送给好友时可以直接打开对于的页面。但是对于管理后台来说,地址栏上的一大串url参数是不允许的,不美观也不安全。 比如...
  • 关于页面刷新的问题

    千次阅读 2004-10-24 23:31:00
    在做.net开发时,经常能碰到这样的情况,页面很长,而我们一般用的都是服务器端控件,用服务器端控件有这样一个缺点,就是控件每次都要和服务器交互,而产生页面的刷新,试想一下,如果页面很长,而页面中的控件又很...
  • python-selenium,关于页面滑动的操作

    万次阅读 2018-02-26 11:42:02
    第一种:#滑到底部js="var q=document.documentElement.scrollTop=100000"driver.execut_script(js)目前在firefox,chrome上验证都是可以跑通的#滑动到顶部js="var q=document.documentElement....
  • js = "var q=document.body.scrollTop=10000" # documentElement表示获取body节点元素 self.driver.execute_script(js) 3、如果滚动条是针对某个div可以用如下方式:该页面的滚动条就是针对class='main’的div而言...
  • 比如一个OA系统的管理页面,导航栏是一块,来刷新一块页面页面 或者指向其他页面,就是c#的母版页的概念 除了这个还有iframe框架,还有其他什么方法实现?
  • 1.NavController概述  NavController是导航控制器组件的基类,如Nav和Tab。 您可以使用导航控制器导航到应用程序中的页面。... 当前页面是数组中的最后一个页面,或者堆栈的顶部,如果我们想到这样
  • 关于页面内JS函数无法调用原因。

    千次阅读 2017-02-24 10:35:34
    JS函数如下: function add() { var value = document.getElementById("number").value; document.getElementById("number").value = value + 1; } 点击触发如下:

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 88,567
精华内容 35,426
关键字:

关于页面