m_uncle
m_uncle

Vue.js移动端左滑demo和JS事件监听手机屏幕触摸事件 Touch

**

Vue.js移动端左滑demo和JS事件监听手机屏幕触摸事件 Touch

**
这是一个用vue.js写的一个仿滑动解锁的demo，和对Touch的一些理解

以下是四种touch事件

  1. touchstart: //手指放到屏幕上时触发

  2. touchmove: //手指在屏幕上滑动式触发

  3. touchend: //手指离开屏幕时触发

  4. touchcancel: //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

touches: //当前屏幕上所有手指的列表

targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：

clientX / clientY: //触摸点相对浏览器窗口的位置

pageX / pageY: //触摸点相对于页面的位置

screenX / screenY: //触摸点相对于屏幕的位置

identifier: //touch对象的ID

target: //当前的DOM元素

注意：

手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。
所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放

通过meta元标签来设置。

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">

2.禁止滚动

preventDefault是阻止默认行为，touch事件的默认行为就是滚动。

event.preventDefault();

实例如下：


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <script src="https://unpkg.com/vue">script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta content="telephone=no" name="format-detection">
        <style>
            *{padding: 0;margin: 0;}
            body {background: #EEEEEE;}
            .box {text-align: center;}
            .btn {
                position: relative;
                width: 70%;
                height: 40px;
                margin: 150px auto;
                border-radius: 20px;
                background: #333333;
            }
            .btn-move {
                position: absolute;
                left: 0;
                top: 0;
                width: 40px;
                height: 40px;
                border-radius: 20px;
                background: #ededed;
            }
            .tt {
                font-size: 20px;
                color: #008000;
                text-align: center;
                margin-top: 50px;
            }
        style>
    head>
    <body>
        <div id="box">
            <slide-release>slide-release>
        div>

        <script type="text/x-template" id="slide">
            

                <div class="btn" ref='remove'>
                    <span ref='btnImg' class="btn-move"  
                      @touchstart='touchStart' 
                      @touchmove='touchMove' 
                      @touchend='touchEnd' 
                      :style="slideEffect"
                     >
                    span>
                div>
                <p class="tt" v-show="isShow">你滑动成功了！p>
            div>


        script>
        <script>
            Vue.component('slide-release',{
                template:'#slide',
                data:function(){
                    return {
                        isShow:false,
                        startX:0,//开始触摸的位置
                        moveX:0,//滑动时的位置
                        endX:0,//结束触摸的位置
                        disX:0,//移动距离
                        slideEffect:'',//滑动时的效果,使用v-bind:style="deleteSlider"

                    }
                },
                methods:{
                    touchStart:function(ev) {
                        ev = ev || event;
                        ev.preventDefault();
//                      console.log(ev.targetTouches);
//                      console.log(ev.changedTouches);
                        if(ev.touches.length == 1) {    //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
                            this.startX = ev.touches[0].clientX; // 记录开始位置
                        }
                    },
                    touchMove:function(ev) {
                        ev = ev || event;
                        ev.preventDefault();
                        let btnWidth = this.$refs.remove.offsetWidth;  //$refs 减少获取dom节点的消耗
                        let btnImg = this.$refs.btnImg.offsetWidth;
                        console.log(ev.targetTouches);
                        console.log(ev.changedTouches);
                        if(ev.touches.length == 1) {
                            //滑动时距离浏览器左侧的距离
                            this.moveX = ev.touches[0].clientX;

                            //实时的滑动的距离-起始位置=实时移动的位置
                            this.disX = this.moveX-this.startX;
                            if(this.disX<0 || this.disX == 0) {
                                this.slideEffect = 'transform:translateX(0px)';
                            }else if(this.disX>0){
                                this.slideEffect = 'transform:translateX('+this.disX+'px)';

                                // 最大也只能等于删除按钮宽度 
                                if(this.disX>=btnWidth) {
                                    this.slideEffect = 'transform:translateX('+(btnWidth-btnImg)+'px)';
                                }
                            }
                        }
                    },
                    touchEnd:function(ev){
                        ev = ev || event;
                        ev.preventDefault();
                        let btnWidth = this.$refs.remove.offsetWidth;
                        let btnImg = this.$refs.btnImg.offsetWidth;
//                      console.log(ev.changedTouches);
                        if(ev.changedTouches.length == 1) {
                            let endX = ev.changedTouches[0].clientX;
                            this.disX = endX-this.startX;
                            console.log(this.disX,'this.disX')
                            console.log((btnWidth/2),'btnWidth/2');
                            if(this.disX < (btnWidth/2)) {
                                this.slideEffect = 'transform:translateX(0px)';
                            }else {
                                this.slideEffect = "transform:translateX("+(btnWidth-btnImg)+ "px)";
                                //让字段显示出来，或者写你需要的逻辑
                                this.isShow = true
                            }
                        }
                    }
                }
            })
            var vm = new Vue({
                el:'#box',
            })
        script>
    body>
html>

刚开始我也以为touch的三个事件都有targetTouches，touches以及changedTouches对象列表，
其实不然，touchend事件中应该是只有个changedTouches触摸实例列表的，
而且这里说明一下，回调函数的event只是一个普通的object对象，
实际上event中有一个originalEvent属性，这才是真正的touch事件，
这个事件中才存在着上诉三个触摸实例列表，这三个实例存储了触摸事件的位置等等属性，类似于鼠标事件。所以貌似touchend事件中只能用changedTouches！！

希望我们所有的新手小白能一起进步~~！

你可能感兴趣的:(vueJs)

  • Javaweb学习之Vue模板语法（三） 不要数手指啦 vue.js学习前端
    目录学习资料前情回顾本期介绍（vue模板语法）文本插值Vue的Attribute绑定使用JavaScript表达式综合实例代码：学习资料Vue.js-渐进式JavaScript框架|Vue.js(vuejs.org)前情回顾项目的创建大家可以看这篇文章Vue学习之项目的创建-CSDN博客本期介绍（vue模板语法）首先，找到我们编写代码的地方找到自己项目的src文件夹，打开之后点击component
  • Vue3-尚硅谷笔记 八月份的天气 Vue3-笔记笔记
    1.Vue3简介2020年9月18日，Vue.js发布版3.0版本，代号：OnePiece（n经历了：4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址：Releasev3.0.0OnePiece·vuejs/core截止2023年10月，最新的公开版本为：3.3.41.1.【性能的提升】打包大小减少41%。初次渲染快55%,更新渲染快133%。内存减少54%。1.2.【
  • Vue如何处理数据、v-HTML的使用及总结 网络点点滴 Vue3vue.jshtml前端
    Vue如何处理数据、v-HTML的使用及总结Vue是如何处理数据的这里我们先看一段代码constapp=Vue.createApp({data(){return{courseGoalA:'学习Vue,最终掌握Vue',courseGoalB:'掌握Vue,并构建相应的应用程序',vueLink:'https://cn.vuejs.org/'};},methods:{outputGoal(){con
  • VUE 2+3 一只鱼^_ Webvue.js前端javascript数据结构算法前端框架
    Vue是什么？概念：Vue是一个用于构建用户界面的渐进式框架构建用户界面：基于数据动态渲染页面Vue的两种使用方式：1.Vue核心包开发场景：局部模块改造2.Vue核心包&Vue插件工程化开发场景：整站开发注：Vuejs核心包(声明式渲染，组件系统)优点：大大提升开发效率----------------------------------------------------------------
  • 《Vuejs设计与实现》第 12 章（组件实现原理 上） 前端 贾公子 vue.js前端javascript
    目录12.1组件的渲染12.2组件状态与自更新12.3组件实例与生命周期2.4Props与组件被动更新在上一章节，我们详细探讨了渲染器的基本概念和实现方式，它的主要作用是将虚拟DOM渲染为真实DOM。然而，当我们处理复杂页面时，虚拟DOM描述页面结构的代码量可能会剧增，导致页面模板臃肿。为此，我们引入了组件化的概念，通过组件，我们可以将大型页面划分为多个模块，每个模块都独立为一个组件，最终组成完整
  • VUE常用UI组件插件及框架 ctf_0226 vue.jsui前端
    UI组件及框架element-饿了么出品的Vue2的webUI工具套件mint-ui-Vue2的移动UI元素iview-基于Vuejs的开源UI组件库Keen-UI-轻量级的基本UI组件合集vue-material-通过VueMaterial和Vue2建立精美的app应用muse-ui-三端样式一致的响应式UI库vuetify-为移动而生的VueJS2组件框架vonic-快速构建移动端单页应用vu
  • Vue.js 中的 v-bind 指令详解 步行cgn Vuevue.js前端javascript
    Vue.js中的v-bind指令详解v-bind是Vue.js的核心指令之一，用于动态绑定HTML属性（如class、style、href等）或组件props到Vue实例的数据。一、基础语法二、核心功能动态绑定普通属性链接data(){return{url:'https://vuejs.org',imagePath:'/logo.png'}}绑定class和styleVue对这两个属性做了特殊增强
  • 快速搭建一个vue前端工程 是烟花哈 测试开发前端vue.jsjavascript
    一、环境准备1、安装node.js下载地址：Node.js推荐版本如下：2、检查node.js版本node-vnpm-v二、安装Vue脚手架Vue脚手架是Vue官方提供的标准化开发工具。vue官网：https://cn.vuejs.org/全局安装@vue/cli（仅第一次搭建环境时执行）npminstall-g@vue/cli检查是否安装成功vue--version三、创建vue项目进入到你想要
  • 使用Vite构建Vue3项目，对路由Vue Router 4.x的设置 夏日米米茶 web前端Vue3vue-routervue3vite
    Vue3官网：https://v3.cn.vuejs.org/Vite官网：https://cn.vitejs.dev/VueRouter官网：https://next.router.vuejs.org/zh/使用Vite构建时，会和以前的有些写法有些不同，例如之前我们使用//导入路由对象importVueRouterfrom'vue-router'//路径配置.vue可以省略constroute
  • vue指令 爱吃鱼的小测试 VUE学习笔记vue.jsjavascript前端
    Vue指令1、进入页面使一个输入框自动获取焦点2、自定义指令全局的局部的钩子函数钩子函数参数动态指令参数函数简写官方文档https://cn.vuejs.org/v2/guide/custom-directive.html1、进入页面使一个输入框自动获取焦点操作DOM的实现方式，在vue中不推荐使用document.getElementById('name').focus()想要实现的方式，在元素
  • vue2学习文档 大卡拉米 学习vue.js前端
    Vue2学习文档英文官网:Vue2:https://vuejs.org/Vue3：https://vuejs.org/中文官网Vue2:https://v2.cn.vuejs.org/Vue3:https://cn.vuejs.org/入门前言用来构建用户界面的渐进式的js库与其它前端JS框架的关联借鉴Angular的模板和数据绑定技术借鉴React的组件化和虚拟DOM技术特点声明式无需亲自操作D
  • Vue百日学习计划Day43-45天详细计划-Gemini版 LuckyLay vue.js学习前端
    Day43:Composable函数基础与抽取简单逻辑(~3小时)本日目标:理解Composable函数的概念、优势，并学会如何将简单的、无状态的逻辑抽取为Composable。所需资源:Vue3官方文档(组合式函数):https://cn.vuejs.org/guide/reusability/composables.html学习计划:番茄时钟1(25分钟工作+5分钟休息):内容:Composa
  • Vue百日学习计划Day28-32天详细计划-Gemini版 LuckyLay vue.js学习javascript
    总目标:在Day28-32深入理解Vue3的响应式机制，熟练掌握CompositionAPI中的setup,ref,reactive,toRefs,readonly,computed,watch,watchEffect等核心API的使用。所需资源:Vue3官方文档(组合式API):https://cn.vuejs.org/guide/introduction.html#composition-ap
  • Vue百日学习计划Day24-28天详细计划-Gemini版 LuckyLay vue.js学习前端
    总目标:在Day24-27熟练掌握Vue.js的各种模板语法，包括文本插值、属性绑定、条件渲染、列表渲染、事件处理和表单绑定，并能结合使用修饰符。所需资源:Vue3官方文档(模板语法):https://cn.vuejs.org/guide/essentials/template-syntax.htmlVue3官方文档(条件渲染):https://cn.vuejs.org/guide/essenti
  • Vue百日学习计划Day33-35天详细计划-Gemini版 LuckyLay vue.js学习前端
    总目标:在Day33-35理解Vue组件从创建到销毁的完整生命周期，熟练掌握CompositionAPI中主要的生命周期钩子，并知道在不同阶段执行哪些操作。所需资源:Vue3官方文档(生命周期钩子):https://cn.vuejs.org/guide/essentials/lifecycle.html你的Vue3实践项目。Day33:生命周期钩子-创建与挂载阶段(~3小时)本日目标:理解组件生命
  • 前端技术栈学习：Vue2、Vue cli脚手架、ElementUI组件库、Axios 随遇而安622&508 前端技术栈学习笔记
    1基本介绍（1）Vue是一个前端框架,易于构建用户界面（2）Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或项目整合（3）支持和其它类库结合使用（4）开发复杂的单页应用非常方便（5）Vue是Vue.js的简称官网:https://cn.vuejs.org/git地址:https://github.com/vuejs2MVVM机制示意图解读MVVM思想(上图)M∶即Model，模型，包括
  • Vue百日学习计划Day21-23天详细计划-Gemini版 LuckyLay vue.js学习前端
    总目标:在Day21-23完成Vue.js的介绍学习、环境搭建，并成功运行第一个Vue3项目，理解其基本结构。Day21:Vue.js介绍与概念理解(~3小时)本日目标:理解Vue.js是什么、渐进式框架的概念以及选择Vue的原因。初步了解Vite是什么及其作用。所需资源:Vue3官方文档(介绍):https://cn.vuejs.org/guide/introduction.htmlVite官方
  • 尤小右：VitePress 初步实现小目标，极简静态站点生成器 前端开发博客 javavuejavascripthtmlweb
    VitePress：Vite&Vue驱动的静态网站生成器https://github.com/vuejs/vitepressVuePress的小兄弟，建立在vite的基础上npminstall-Dvitepressecho'#HelloVitePress'>index.md#startsdevservernpxvitepress#build>.vitepress/distnpxvitepressb
  • 开发过程中需要安装的浏览器插件 zlpzlpzyd 前端前端
    Vue.jsdevtoolshttps://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN&utm_source=ext_sidebarModHeaderhttps://chromewebstore.google.com/detail/modheader-modify
  • active-class 是哪个组件的属性？ nanzhuhe 前端
    active-class属于vue-router的样式方法，当router-link标签被点击时将会应用这个样式一、首先，active-class是什么，active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；相关可查阅文档：https://router.vuejs.org/zh-cn/api/router-link.html二、在vue-ro
  • vue中使用web serial api实现串口通信 学了就忘 VUE串口vue.jsjavascript
    文章目录webserialapi相关资料网址vue中实现字符串转GBK字节数组字节数组转16进制vuejs中使用vue文件中调用js的方法webserialapi相关资料网址网址：https://wicg.github.io/serial/#open-method相关资料：https://curtion.github.io/Web-SerialPort/https://github.com/Cur
  • 带你深入浅出Vue zyyn_未来可期 Vuevue.js前端javascript
    如果文章对你有帮助欢迎【关注❤️❤️❤️点赞收藏⭐⭐⭐】一键三连！一起努力！前言️Vue介绍Vue是一套用于构建用户界面的渐进式框架与其它大型框架不同的是：Vue被设计为可以自底向上逐层应用Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动️官网：https://cn.vuejs.
  • Vue3源码【一】—— ref&reactive响应式原理及简单实现 Modify_QmQ #vue3javascript前端vue.js
    响应式ref、reactive源码地址：https://github.com/vuejs/core首先还是从最开始学的ref的源码看起，他的路径在packages/reactivity/src/ref.ts，这里看源码分析就直接将源码执行的步骤给他粘贴出来了哈。首先我们看一下ref是怎么创建的1、创建Ref//第一步，我们还是直接到ref关键字，可以看到这个，这个就是我们使用的ref()用来创建响
  • 前后端分开架构下web vuejs三维立体three曲线设计入门 zjqhadoop 数码相机
    import*asTHREEfrom'three';import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";import*ascurveSubjectfrom"@/api/hologram/curveSubject";exportdefault{name:'ThreeDCurve',mounted(){letwinW
  • vuejs入门three曲线图设计 zjqhadoop 数码相机
    import*asTHREEfrom'three';import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";import*ascurveSubjectfrom"@/api/hologram/curveSubject";exportdefault{name:'ThreeDCurve',mounted(){letwinW
  • 7个最好用的Vue Tree Select树形组件 萌尛喵 vue.js前端javascript
    Vue树形选择器（Vuetreeselect）组件在搭建Vue的app中特别常用，Vuetreeselect除了简单的树形结构外，还有非常多样的功能来配合不同场景的使用。比如搜索过滤，前端添加删除树枝，前端编辑修改子树名，拖拽排序，对用户操作事件记录等。VueJSTree-全功能，树状单选多选，可拖拽，过滤搜索VueDraggableNestedTree-纯树形选择，轻盈趁手VueTreeList
  • webpack使用详细步骤 木心操作 webpackwebpack前端node.js
    项目描述本项目webpack的基本使用。webpack官方：https://webpack.docschina.org/concepts/Element-plus官方：https://element-plus.sxtxhy.com/zh-CN/Vue3官方：https://cn.vuejs.org/项目组成明细每个步骤完成后重新执行npmrundev即可看到效果1、webpack打包工具安装npm
  • 前端 Web 与原生应用端 WebView 通信交互 - HarmonyOS Next survivorsfyh HarmonyOS前端harmonyos华为javascript
    基于鸿蒙HarmonyOSNext与前端Vue通信交互相关小结;DevEcoStudioNEXTDeveloperPreview2Vuejs两端相互拟定好协议后,通过前端页面的点击事件,将所需的数据传输给原生移动端组件方法中,处理后将消息回传至前端.根据官方文档的案例尝试,但没成功...后经过几经尝试后两端握手成功...(官方文档略显粗糙,好一番折腾)一.应用端基于importweb_webvie
  • Vue3 从零到全掌握：最详尽的入门指南（近万字超全内容） AA-老高(接毕设) 开发资料vue.js前端javascript
    一、Vue脚手架Vue3官方文档地址：https://v3.cn.vuejs.org/以前的官方脚手架@vue-cli也可以用，但这里推荐一个更轻快的脚手架Vite脚手架网址：Vite中文网方式一：vue-cli脚手架初始化Vue3项目官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create//   查看@vue/
  • vue项目提示 WebSocketClient.js:49 WebSocket connection to ‘ws://xxxx/ws‘ failed: Invalid frame header Beamon__ vuevue.js前端
    项目信息vue-cli创建的vue3+webpack5项目；问题现状配置proxy代理后，控制台报错，不影响使用，但是不美观，并且不利于在控制台调试代码；原因定位代理问题，新配置的接口代理，影响到了项目内置的本地服务代理配置，参考Websocketconnectionfailed,Invalidframeheader·Issue#1850·vuejs/vue-cli·GitHub解决方案方案一一刀
  • java解析APK 3213213333332132 javaapklinux解析APK
    解析apk有两种方法 1、结合安卓提供apktool工具，用java执行cmd解析命令获取apk信息 2、利用相关jar包里的集成方法解析apk 这里只给出第二种方法，因为第一种方法在linux服务器下会出现不在控制范围之内的结果。 public class ApkUtil { /** * 日志对象 */ private static Logger
  • nginx自定义ip访问N种方法 ronin47 nginx 禁止ip访问
    　　　因业务需要，禁止一部分内网访问接口，　由于前端架了F5，直接用deny或allow是不行的，这是因为直接获取的前端Ｆ５的地址。 　　　所以开始思考有哪些主案可以实现这样的需求，目前可实施的是三种： 　　　一：把ip段放在redis里，写一段lua           二：利用geo传递变量，写一段
  • mysql timestamp类型字段的CURRENT_TIMESTAMP与ON UPDATE CURRENT_TIMESTAMP属性 dcj3sjt126com mysql
    timestamp有两个属性，分别是CURRENT_TIMESTAMP 和ON UPDATE CURRENT_TIMESTAMP两种，使用情况分别如下：   1.   CURRENT_TIMESTAMP    当要向数据库执行insert操作时，如果有个timestamp字段属性设为   CURRENT_TIMESTAMP，则无论这
  • struts2+spring+hibernate分页显示 171815164 Hibernate
    分页显示一直是web开发中一大烦琐的难题，传统的网页设计只在一个JSP或者ASP页面中书写所有关于数据库操作的代码，那样做分页可能简单一点，但当把网站分层开发后，分页就比较困难了，下面是我做Spring+Hibernate+Struts2项目时设计的分页代码，与大家分享交流。 　　1、DAO层接口的设计，在MemberDao接口中定义了如下两个方法： public in
  • 构建自己的Wrapper应用 g21121 rap
            我们已经了解Wrapper的目录结构，下面可是正式利用Wrapper来包装我们自己的应用，这里假设Wrapper的安装目录为:/usr/local/wrapper。           首先，创建项目应用   &nb
  • [简单]工作记录_多线程相关 53873039oycg 多线程
         最近遇到多线程的问题,原来使用异步请求多个接口(n*3次请求)     方案一 使用多线程一次返回数据,最开始是使用5个线程,一个线程顺序请求3个接口,超时终止返回     缺点       测试发现必须3个接
  • 调试jdk中的源码，查看jdk局部变量 程序员是怎么炼成的 jdk 源码
    转自：http://www.douban.com/note/211369821/    学习jdk源码时使用--   学习java最好的办法就是看jdk源代码，面对浩瀚的jdk（光源码就有40M多，比一个大型网站的源码都多）从何入手呢，要是能单步调试跟进到jdk源码里并且能查看其中的局部变量最好了。 可惜的是sun提供的jdk并不能查看运行中的局部变量
  • Oracle RAC Failover 详解 aijuans oracle
    Oracle RAC 同时具备HA(High Availiablity) 和LB(LoadBalance). 而其高可用性的基础就是Failover(故障转移). 它指集群中任何一个节点的故障都不会影响用户的使用，连接到故障节点的用户会被自动转移到健康节点，从用户感受而言， 是感觉不到这种切换。 Oracle 10g RAC 的Failover 可以分为3种： 1. Client-Si
  • form表单提交数据编码方式及tomcat的接受编码方式 antonyup_2006 JavaScripttomcat浏览器互联网servlet
    原帖地址：http://www.iteye.com/topic/266705 form有2中方法把数据提交给服务器，get和post,分别说下吧。 （一）get提交 1.首先说下客户端（浏览器）的form表单用get方法是如何将数据编码后提交给服务器端的吧。    对于get方法来说，都是把数据串联在请求的url后面作为参数，如：http://localhost:
  • JS初学者必知的基础 百合不是茶 js函数js入门基础
    JavaScript是网页的交互语言,实现网页的各种效果, JavaScript 是世界上最流行的脚本语言。 JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。 JavaScript 被设计为向 HTML 页面增加交互性。 许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。几乎每个人都有能力将小的
  • iBatis的分页分析与详解 bijian1013 javaibatis
            分页是操作数据库型系统常遇到的问题。分页实现方法很多，但效率的差异就很大了。iBatis是通过什么方式来实现这个分页的了。查看它的实现部分，发现返回的PaginatedList实际上是个接口，实现这个接口的是PaginatedDataList类的对象，查看PaginatedDataList类发现，每次翻页的时候最
  • 精通Oracle10编程SQL(15)使用对象类型 bijian1013 oracle数据库plsql
    /* *使用对象类型 */ --建立和使用简单对象类型 --对象类型包括对象类型规范和对象类型体两部分。 --建立和使用不包含任何方法的对象类型 CREATE OR REPLACE TYPE person_typ1 as OBJECT( name varchar2(10),gender varchar2(4),birthdate date ); drop type p
  • 【Linux命令二】文本处理命令awk bit1129 linux命令
    awk是Linux用来进行文本处理的命令，在日常工作中，广泛应用于日志分析。awk是一门解释型编程语言，包含变量，数组，循环控制结构，条件控制结构等。它的语法采用类C语言的语法。   awk命令用来做什么？ 1.awk适用于具有一定结构的文本行，对其中的列进行提取信息 2.awk可以把当前正在处理的文本行提交给Linux的其它命令处理，然后把直接结构返回给awk 3.awk实际工
  • JAVA(ssh2框架)+Flex实现权限控制方案分析 白糖_ java
      目前项目使用的是Struts2+Hibernate+Spring的架构模式，目前已经有一套针对SSH2的权限系统，运行良好。但是项目有了新需求：在目前系统的基础上使用Flex逐步取代JSP，在取代JSP过程中可能存在Flex与JSP并存的情况，所以权限系统需要进行修改。 【SSH2权限系统的实现机制】 权限控制分为页面和后台两块：不同类型用户的帐号分配的访问权限是不同的，用户使
  • angular.forEach boyitech AngularJSAngularJS APIangular.forEach
    angular.forEach 描述: 循环对obj对象的每个元素调用iterator, obj对象可以是一个Object或一个Array. Iterator函数调用方法: iterator(value, key, obj), 其中obj是被迭代对象，key是obj的property key或者是数组的index，value就是相应的值啦. (此函数不能够迭代继承的属性.)
  • java-谷歌面试题-给定一个排序数组，如何构造一个二叉排序树 bylijinnan 二叉排序树
    import java.util.LinkedList; public class CreateBSTfromSortedArray { /** * 题目:给定一个排序数组，如何构造一个二叉排序树 * 递归 */ public static void main(String[] args) { int[] data = { 1, 2, 3, 4,
  • action执行2次 Chen.H JavaScriptjspXHTMLcssWebwork
    xwork 写道 <action name="userTypeAction" class="com.ekangcount.website.system.view.action.UserTypeAction"> <result name="ssss" type="dispatcher">
  • [时空与能量]逆转时空需要消耗大量能源 comsci 能源
            无论如何,人类始终都想摆脱时间和空间的限制....但是受到质量与能量关系的限制,我们人类在目前和今后很长一段时间内,都无法获得大量廉价的能源来进行时空跨越.....         在进行时空穿梭的实验中,消耗超大规模的能源是必然
  • oracle的正则表达式(regular expression)详细介绍 daizj oracle正则表达式
        正则表达式是很多编程语言中都有的。可惜oracle8i、oracle9i中一直迟迟不肯加入，好在oracle10g中终于增加了期盼已久的正则表达式功能。你可以在oracle10g中使用正则表达式肆意地匹配你想匹配的任何字符串了。 正则表达式中常用到的元数据(metacharacter)如下： ^ 匹配字符串的开头位置。 $ 匹配支付传的结尾位置。 *
  • 报表工具与报表性能的关系 datamachine 报表工具birt报表性能润乾报表
    在选择报表工具时，性能一直是用户关心的指标，但是，报表工具的性能和整个报表系统的性能有多大关系呢？ 要回答这个问题，首先要分析一下报表的处理过程包含哪些环节，哪些环节容易出现性能瓶颈，如何优化这些环节。   一、报表处理的一般过程分析 1、用户选择报表输入参数后，报表引擎会根据报表模板和输入参数来解析报表，并将数据计算和读取请求以SQL的方式发送给数据库。   2、
  • 初一上学期难记忆单词背诵第一课 dcj3sjt126com wordenglish
    what 什么  your 你 name 名字 my 我的 am 是 one 一 two 二 three 三 four 四 five 五 class 班级，课   six 六 seven 七 eight 八 nince 九 ten 十 zero 零 how 怎样 old 老的 eleven 十一 twelve 十二 thirteen
  • 我学过和准备学的各种技术 dcj3sjt126com 技术
    语言VB https://msdn.microsoft.com/zh-cn/library/2x7h1hfk.aspxJava http://docs.oracle.com/javase/8/C# https://msdn.microsoft.com/library/vstudioPHP http://php.net/manual/en/Html 
  • struts2中token防止重复提交表单 蕃薯耀 重复提交表单struts2中token
    struts2中token防止重复提交表单   >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月12日 11:52:32 星期日 ht
  • 线性查找二维数组 hao3100590 二维数组
    1.算法描述 有序（行有序，列有序，且每行从左至右递增，列从上至下递增）二维数组查找，要求复杂度O(n)   2.使用到的相关知识： 结构体定义和使用，二维数组传递（http://blog.csdn.net/yzhhmhm/article/details/2045816）   3.使用数组名传递 这个的不便之处很明显，一旦确定就是不能设置列值 //使
  • spring security 3中推荐使用BCrypt算法加密密码 jackyrong Spring Security
    spring security 3中推荐使用BCrypt算法加密密码了，以前使用的是md5， Md5PasswordEncoder 和 ShaPasswordEncoder，现在不推荐了，推荐用bcrpt Bcrpt中的salt可以是随机的，比如： int i = 0; while (i < 10) { String password = "1234
  • 学习编程并不难,做到以下几点即可! lampcy javahtml编程语言
    不论你是想自己设计游戏，还是开发iPhone或安卓手机上的应用，还是仅仅为了娱乐，学习编程语言都是一条必经之路。编程语言种类繁多，用途各 异，然而一旦掌握其中之一，其他的也就迎刃而解。作为初学者，你可能要先从Java或HTML开始学，一旦掌握了一门编程语言，你就发挥无穷的想象，开发 各种神奇的软件啦。 1、确定目标 学习编程语言既充满乐趣，又充满挑战。有些花费多年时间学习一门编程语言的大学生到
  • 架构师之mysql----------------用group+inner join,left join ,right join 查重复数据（替代in) nannan408 right join
    1.前言。   如题。 2.代码 (1)单表查重复数据,根据a分组   SELECT m.a,m.b, INNER JOIN （select a,b,COUNT(*) AS rank FROM test.`A` A GROUP BY a HAVING rank>1 )k ON m.a=k.a （2）多表查询 ， 使用改为le
  • jQuery选择器小结 VS 节点查找（附css的一些东西） Everyday都不同 jquerycssname选择器追加元素查找节点
    最近做前端页面，频繁用到一些jQuery的选择器，所以特意来总结一下：   测试页面： <html> <head> <script src="jquery-1.7.2.min.js"></script> <script> /*$(function() { $(documen
  • 关于EXT tntxia ext
      ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用 javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。       ExtJs最开始基于YUI技术，由开发人员Jack
  • 一个MIT计算机博士对数学的思考 xjnine Math
     在过去的一年中，我一直在数学的海洋中游荡，research进展不多，对于数学世界的阅历算是有了一些长进。为什么要深入数学的世界？作为计算机的学生，我没有任何企图要成为一个数学家。我学习数学的目的，是要想爬上巨人的肩膀，希望站在更高的高度，能把我自己研究的东西看得更深广一些。说起来，我在刚来这个学校的时候，并没有预料到我将会有一个深入数学的旅程。我的导师最初希望我去做的题目，是对appe
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他