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)

  • vue3+vite 自动引入export default的包 大橙子- vue.js前端
    importautoImportfrom'unplugin-auto-import/vite';exportdefaultdefineConfig({plugins:[vue(),vueJsx(),autoImport({imports:['vue','vue-router','pinia',{//相当于importuseRouterStackStorefrom'@/store/modules/r
  • Pinia入门 qincjun 前端学习指南pinia
    一、铺垫pinia官网：https://pinia.vuejs.org/zh/getting-started.html以下的内容全部来自官网；只不过有时候访问官网上不去；只能自己扒下来；pinia的前端使用非常简单；只需要掌握几个步骤就可以二、套路1.用你喜欢的包管理器安装pinia：yarnaddpinia#或者使用npmnpminstallpinia2.创建一个pinia实例(根store)并
  • 探索时间的脉络：Vue.js下的Timeline组件——Timeline Vuejs 房耿园Hartley
    探索时间的脉络：Vue.js下的Timeline组件——TimelineVuejs项目地址:https://gitcode.com/gh_mirrors/ti/timeline-vuejs在数字时代，将信息以时间轴的形式展示变得日益重要，它帮助我们清晰地追踪事件的发展和变迁。今天，我们要推荐一个精巧且功能强大的Vue.js组件——TimelineVuejs。这款开源项目专为Vue爱好者设计，旨在优
  • Vue3快速上手 ConstMAO 前端vue.jsjavascript前端
    Vue3快速上手1.Vue3简介2020年9月18日，Vue.js发布3.0版本，代号：OnePiece（海贼王）耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.02.Vue3带来了什么1.性能的提升打包大小减少41%初次渲染快55%,更新
  • 推荐项目：Vue-Touch-Ripple，打造优雅的触碰涟漪效果 杭云瑗Ward
    推荐项目：Vue-Touch-Ripple，打造优雅的触碰涟漪效果vue-touch-rippleAink-rippleeffectcomponentfor@vuejs项目地址:https://gitcode.com/gh_mirrors/vu/vue-touch-ripple在追求极致用户体验的前端领域，细节往往决定了一款应用的质感。今天，我们来探讨一个能够为Vue应用增添MaterialDes
  • 探索TroisJS：结合ThreeJS与VueJS 3的前端3D开发新星 平列金Hartley
    探索TroisJS：结合ThreeJS与VueJS3的前端3D开发新星trois✨ThreeJS+VueJS3+ViteJS⚡项目地址:https://gitcode.com/gh_mirrors/tr/trois在现代Web开发领域，3D图形的需求日益增长，而TroisJS作为一个新兴的开源项目，正以其独特的优势吸引着开发者的目光。本文将深入介绍TroisJS，分析其技术特点，探讨其应用场景，并
  • Vue（1） 3283478051Sun vue.js前端javascript
    一.初识Vue1.Vue是什么1.1概念：Vue是一个用于构建用户界面的渐进式框架构建用户界面：基于数据渲染出用户看到的页面渐进式：Vue相关的生态语法：**Vuejs：声明式渲染，组件系统；**客户端路由（VueRouter），大规模状态管理（Vuex），构建工具（Webpack/Vite）框架：一套完整的项目解决方案，大大提高开发效率（70%）1.2Vue的两种使用方法①Vue核心包开发，场景
  • Vue开发资源汇总 Dev-L 前端
    https://github.com/opendigg/awesome-github-vuehttps://github.com/vuejs/awesome-vue内容UI组件开发框架实用库服务端辅助工具应用实例Demo示例UI组件element★13489-饿了么出品的Vue2的webUI工具套件Vux★8133-基于Vue和WeUI的组件库iview★6634-基于Vuejs的开源UI组件库m
  • VUE路由守卫 「已注销」 VUEvue
    序：通过路由守卫可以对每次刷新或者进入的路由界面进行权限验证，相当于VUE中的全局中间件。1.全局守卫：router.beforeEach注册一个全局前置守卫。参考文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html。注册登录主面板router.jsLogin.vueDashBoard.vue首先是DashBoar
  • 创建Vue3.0工程和常用 Composition API 黎明之道 VUE1024程序员节
    一、创建Vue3.0工程1.使用vue-cli创建官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create##查看@vue/cli版本，确保@vue/cli版本在4.5.0以上vue--version##安装或者升级你的@vue/clinpminstall-g@vue/cli##创建vuecreatevue_tes
  • vue3+elementPlus之后台管理系统（从0到1）(day1-项目主体搭建) 沐暖沐 vue.js前端javascript
    vue3官方文档：https://cn.vuejs.org/guide/introduction.html1、项目创建确保电脑已安装node查看命令：node-v进入项目目录，创建项目npminitvue@latestNeedtoinstallthefollowingpackages:[email protected]?(y)yVue.js-TheProgressiveJav
  • Docker多架构镜像构建踩坑记 一直学下去 docker容器adm64arm64多架构
    背景公司为了做信创项目的亮点，需要将现有的一套在X86上运行的应用系统迁移到ARM服务器上运行，整个项目通过后端Java，前端VUEJS开发通过CICD做成Docker镜像在K8S里面运行。但是当前的CICD产品不支持ARM的镜像构建，于是只能手工构建ARM镜像。以下是一些踩坑的记录，希望能帮大家少踩坑构建环境本地电脑DeepinLinux23(Windows的WSL和其他的Linux系统都可以）
  • Pinia的使用（VUE3+VITE） itwlz vue.js前端javascript
    官方地址https://pinia.vuejs.org/zh/安装​​​​​​​npminstallpinia挂载插件import{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'createApp(App).use(createPinia()).mount('#app')定义Store(选项式或组合
  • vue-router 3.X 讲解 故梦867 前端八股总结vue.js前端javascript
    vue-router3.X讲解最近小哆啦在学习之余，发现自己在vue-router中有好多不了解的知识点，小哆啦决定梳理一遍vue-router参考资料：VueRouter(vuejs.org)说起前端路由有些朋友可能会问什么是路由？何为前端路由？小哆啦查阅资料之后发现其实最开始提出路由这个概念的是后端，是来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其
  • vue 表格左右拖拽调整列宽_vue中实现拖动调整左右两侧div的宽度的示例代码 weixin_40008969 vue表格左右拖拽调整列宽
    写在最前最近在使用vue的时候，遇到一个需求，实现左右div可通过中间部分拖拽调整宽度，类似于这样这是我最终的实现效果还是老话，因为我不是专业的前端工程师，只是兼职写一些简单的前端，所以这个功能的实现得益于以下博客，《vue拖动调整左右两侧div的宽度》、《vuejs中拖动改变元素宽度实现宽度自适应大小》，而我只是针对于他们提供的代码，加了亿点点自己所需要的细节。实现原理如上图所示，我们需要将要实
  • vue.config.js 配置 你不讲 wood javascriptvue.js前端webpack开发语言前端框架
    vue.config.js文件是VueCLI项目中的全局配置文件，它允许你以JavaScript的形式来配置构建选项，而不是通过命令行参数或者.vue-clirc的JSON格式。官方文档:https://cli.vuejs.org/zh/config/#全局-cli-配置基础配置publicPath设置构建好的文件被部署后的公共路径。module.exports={publicPath:proce
  • Vue-devtools安装 zhouhao_180
    方法一：1、下载安装包到本地https://github.com/vuejs/vue-devtools2、打开下载好的文件夹，按住shift+鼠标右键,选择在此处打开Powershell窗口3、执行命令npminstall4、执行命令npmrunbuild这一步一定不要忘了，没有执行这一步的话，项目文件夹shells>chrome文件夹里会少一个src文件夹,这里会报错：无法加载背景脚本"buil
  • 回顾vue开发spa（踩坑记录） Just do it
    使用vueJS开发前端页面差不多也有大半多年了。由于项目后台管理页面最早都是使用JQ进行开发的，刚开始使用vue的时候，只能是直接在页面里面引入vueJS框架进行开发，期间把项目后台的编辑页面和其他复杂页面全部改用vueJS的了（没有用到组件，只是增强了一下交互，开发更简单便捷）。由于工期和个人习惯问题，期间也留下了很多坑和隐患，比如不少页面是JQ和vue混用，导致后来改功能的时候痛不欲生……所以
  • Vue初步认识与Vue基础指令 amanohina
    Vue.js简介先来谈谈传统网页开发传统开发的缺点：1.DOM操作频繁，代码繁杂2.DOM操作与逻辑代码混合，可维护性差3.不同功能区域书写在一起，可维护性低4.模块之间的依赖关系复杂Vue.js应运而生官网：https://cn.vuejs.orgVue.js核心特性数据驱动视图数据变化会自动更新到对应元素中，无需手动操作DOM，这种行为称作单向数据绑定。单向数据绑定对于输入框等可输入元素，可设
  • Laravel小程序学习日记2018-07-10 Purson
    有那么一个星期没有写日记了，因为答应了Sheldon15号前完成小程序的学习，很多东西都来不及总结，但是由于有vuejs的基础，wepy的使用是比较清楚的。今天为什么记录主要有1个原因，就是我在laravel小程序课程里面提交的修改被合并了，这次不是一两个错字那么简单，是一个小方法，这里截图庆祝一下。投稿小记录在wepy里面异步函数更新数据，一定要在后面加个this.$apply()
  • 根据地址获取经纬度 牧杉-惊蛰 javascript开发语言elementuihtml
    1：安装依赖与引入调用腾讯地图api前需要先去注册并申请key在vue项目中的/public文件夹中的index.html的head中写入安装lodash：npminstall--savelodash安装jsonp：npminstallvue-jsonp--savemain.js引入jsonpimportVuefrom'vue'import{VueJsonp}from'vue-jsonp'Vue.
  • Vue2.0 WYONG_ZQ java
    Vue2.0饿了么ElementUI:http://element.eleme.io/#/zh-CN/component/installation?Vue2.0从环境搭建到发布：http://blog.csdn.net/sinat_17775997/article/details/52788908Vue官方教程及api:http://cn.vuejs.org/v2/guide/ES6入门教程：ht
  • vue-cli Failed to download repo vuejs-templates/webapck: Response code 404 (Not Found) 张静蕾 vuejs开发经验vuejs
    最近一直在学习vue.现在正进入项目实战练习阶段。不过在此过程中，总是为遇见各种各样的问题，报各种各样的错。像上面这个错，一般都是在写命令时写错单词导致的。正确：vueinitwebpack-simple.（注意“.”点，指当前目录。简单初始化一个项目）正确2：veuinitwebapckmy-project(my-project是自己取得项目名字)；在此提醒：千万别写错单词！！！
  • python markdown vuejs前端：如何正确处理多行字符串的缩进问题 南七小僧 网站开发AI技术产品经理人工智能前端pythonvue.js
    有时候，我们需要使用多行字符串配合format格式化函数来生成Markdown文本。例如，我现在开发了一个AI对话机器人，我发送一个txt文件过去，他首先帮我总结整个文件的内容，然后以问答的形式列出10个要点。你的代码可能是这样写的：defbot(text):summary=summary_text_by_gpt(text)qa=get_qa_by_gpt(text)output='''##文本总
  • 深入理解Vue数据响应式 雨溪滩
    Vue数据响应式主要研究的是Vue构造选项中data属性的特性深入响应式官方文档网址：https://cn.vuejs.org/v2/guide/reactivity.html1.首先理解ES6的getter与setter语法obj={//首先创建一个普通对象name:'小欧',age:18,姓名(){returnthis.name;}}console.log(obj.姓名());//小欧//如何
  • 005 vue 简 洁 冬冬 SpringCloud商城项目vue.js前端webpack
    文章目录vue常用指令01vue-helloworld.html02v-if与v-show.html03v-on.html04v-for.html05v-bind.html06v-model.htmlvue的生命周期vue组件化开发思想使用vue脚手架进行模块化开发index.htmlmain.jsApp.vueHello.vueindex.jsVue官方文档https://cn.vuejs.or
  • vue中v-bind绑定属性常遇问题 白意莲
    本文介绍常遇在vue中会有v-bind与属性相关的，如的src路径，和class属性以及style。1.img中src我们知道img标签的src可以跨域请求，可以访问网络中的图片，比如带有http或https地址的图。假设按原理我们有如下代码：varvm=newVue({el:'#box',data:{title:'hivuejs!',logo:'https://cn.vuejs.org/imag
  • day49（vueJS）vue3的生命周期钩子 服务端渲染概念 vue3的组建通信 vue3的ref属性应用 vue3（vuex和pinia的使用） 李中豪前端大佬 vue.js前端javascript前端框架
    vue3的生命周期钩子服务端渲染概念vue3的组建通信vue3的ref属性应用vue3（vuex和pinia的使用）vue3的生命周期钩子常规要点、总结代码演示补充要点、总结服务端渲染概念要点总结vue3的组建通信要点总结父对子传值子对父传值跨层级组件传值vue3的ref属性应用获取DOM节点要点总结代码演示获取组件实例要点总结代码演示vue3（vuex和pinia的使用）vue3中的vuex要点
  • day43（（VueJS）路由（路由的基本配置流程 路由配置表的抽离 导航方式（标签式导航，编程式导航）路由的不同级别）） 李中豪前端大佬 vue.jsjavascript前端前端框架
    一.路由的基本配置方式1.要点总结1)流程（了解）1>在文件夹router中存在一个index.js文件，该文件中进行路由的管理对象的创建和导出2>在入口文件main.js文件中将路由管理对象导入并注册插件（使用应用实例注册插件需要写在挂载容器的语句前面）2)路由模式1>history模式：history:createWebHistory(import.meta.env.BASE_URL);1>>
  • vue、react和小程序的状态管理 LLLuckyGirl~ vue.jsreact.js前端
    vue2的状态管理vuexvuex官网：https://vuex.vuejs.org/vuex安装在vue2中使用vuex的3版本：npmivuex@3在vue3中使用vuex的4版本：npmivuex@4vuex全局配置使用导出vuex的状态配置:index.jsimportVuefrom'vue'importVuexfrom'vuex'exportdefaultnewVuex.store({a
  • 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其他