他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)html5上拉下拉事件效果演示
作者：用户
本文讲的是html5上拉下拉事件效果演示，
一，下拉事件
&!-- HTML5 --&
&!DOCTYPE html&
&title&html5下拉事件简单实例&
一，下拉事件
&!-- HTML5 --&
&!DOCTYPE html&
&title&html5下拉事件简单实例&/title&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&meta name="apple-touch-fullscreen" content="YES" /&
&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/&
&meta name="apple-mobile-web-app-capable" content="yes"/&
&meta name="format-detection" content="telephone=no"/&
&body id="bodyid"&
&h2&html5下拉事件简单实例&/h2&
&div id="version" style="border:2background-color:yellow"&&/div&
&div id="result" style="border:2 color:"&未触发事件！&/div&
&script type="text/javascript"&
//全局变量，触摸开始位置
var startX = 0, startY = 0;
//touchstart事件
function touchSatrtFunc(evt) {
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = touch.pageX; //页面触点X坐标
var y = touch.pageY; //页面触点Y坐标
//记录触点初始位置
var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';
document.getElementById("result").innerHTML =
catch (e) {
alert('touchSatrtFunc：' + e.message);
//touchmove事件，这个事件无法获取坐标
function touchMoveFunc(evt) {
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = touch.pageX; //页面触点X坐标
var y = touch.pageY; //页面触点Y坐标
var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';
if (y - startY & 100) {
text += '&br/&下拉事件触发';
bindEvent(1);
//document.getElementById("ggimgid").style["webkitTransform"] = 'translate(0px,' + (y - startY) + 'px) scale(1) translateZ(0px)';
document.getElementById("result").innerHTML =
catch (e) {
alert('touchMoveFunc：' + e.message);
//touchend事件
function touchEndFunc(evt) {
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var text = 'TouchEnd事件触发';
document.getElementById("result").innerHTML =
catch (e) {
alert('touchEndFunc：' + e.message);
//绑定事件
function bindEvent(f) {
document.removeEventListener('touchstart', touchSatrtFunc, false);
document.removeEventListener('touchmove', touchMoveFunc, false);
document.removeEventListener('touchend', touchEndFunc, false);
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
document.addEventListener('touchend', touchEndFunc, false);
//判断是否支持触摸事件
function isTouchDevice() {
document.getElementById("version").innerHTML = navigator.appV
document.createEvent("TouchEvent");
//alert("支持TouchEvent事件！");
bindEvent(); //绑定事件
catch (e) {
//alert("不支持TouchEvent事件！" + e.message);
window.onload = isTouchD
&!-- HTML5 --&
&!DOCTYPE html&
&title&html5上拉事件简单实例&/title&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&meta name="apple-touch-fullscreen" content="YES" /&
&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/&
&meta name="apple-mobile-web-app-capable" content="yes"/&
&meta name="format-detection" content="telephone=no"/&
&body id="bodyid"&
&h2&html5上拉事件简单实例&/h2&
&div id="version" style="border:2background-color:yellow"&&/div&
&div id="result" style="border:2 color:"&未触发事件！&/div&
&script type="text/javascript"&
//全局变量，触摸开始位置
var startX = 0, startY = 0;
//touchstart事件
function touchSatrtFunc(evt) {
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = touch.pageX; //页面触点X坐标
var y = touch.pageY; //页面触点Y坐标
//记录触点初始位置
var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';
document.getElementById("result").innerHTML =
catch (e) {
alert('touchSatrtFunc：' + e.message);
//touchmove事件，这个事件无法获取坐标
function touchMoveFunc(evt) {
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = touch.pageX; //页面触点X坐标
var y = touch.pageY; //页面触点Y坐标
var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';
if (y - startY & -100) {
text += '&br/&上拉事件触发';
bindEvent(1);
//document.getElementById("ggimgid").style["webkitTransform"] = 'translate(0px,' + (y - startY) + 'px) scale(1) translateZ(0px)';
document.getElementById("result").innerHTML =
catch (e) {
alert('touchMoveFunc：' + e.message);
//touchend事件
function touchEndFunc(evt) {
evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var text = 'TouchEnd事件触发';
document.getElementById("result").innerHTML =
catch (e) {
alert('touchEndFunc：' + e.message);
//绑定事件
function bindEvent(f) {
document.removeEventListener('touchstart', touchSatrtFunc, false);
document.removeEventListener('touchmove', touchMoveFunc, false);
document.removeEventListener('touchend', touchEndFunc, false);
document.addEventListener('touchstart', touchSatrtFunc, false);
document.addEventListener('touchmove', touchMoveFunc, false);
document.addEventListener('touchend', touchEndFunc, false);
//判断是否支持触摸事件
function isTouchDevice() {
document.getElementById("version").innerHTML = navigator.appV
document.createEvent("TouchEvent");
//alert("支持TouchEvent事件！");
bindEvent(); //绑定事件
catch (e) {
//alert("不支持TouchEvent事件！" + e.message);
window.onload = isTouchD
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索实例
鼠标移动事件演示效果、下拉框选中事件、jquery下拉框选中事件、js下拉框选中触发事件、js触发select下拉事件，以便于您获取更多的相关知识。
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
开发者常用软件，超百款实用软件一站式提供
云栖社区(yq.aliyun.com)为您免费提供相关信息，包括
，所有相关内容均不代表云栖社区的意见！提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
Hbuilder MUI 主动触发上拉下拉加载
导读：在列表的上拉下拉，默认要进行一次上拉刷新，mui的文档没写怎么配置，好吧，踩了好多坑。因为安卓的上拉刷新是原生实现，在页面加载完之后...
在列表的上拉下拉，默认要进行一次上拉刷新，mui的文档没写怎么配置，好吧，踩了好多坑。
因为安卓的上拉刷新是原生实现，在页面加载完之后不能直接触发上拉刷新，需要等一段时间，所以mui提供了配置参数，配置默认上拉刷新一次
mui.init({&
&&pullRefresh&:&{&
&&&&container:refreshContainer,&
&&&&up&:&{&
&&&&&&contentrefresh&:&&正在加载...&,&
&&&&&&contentnomore:'没有更多数据了',&
&&&&&&callback&:pullfresh-function&,&
&&&&&&auto:true&
主动下拉加载&www.bcty365.com&
mui('#pullrefresh').pullRefresh().pulldownLoading();&
主动上拉加载&
mui('#pullrefresh').pullRefresh().pullupLoading();&
转载请注明（B5教程网）原文链接：
网友评论：在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
初始化页面，只有5条数据，但是会自动触发上来加载
&ion-infinite-scroll ng-if="loadMoreIf" on-infinite="loadMore()" distance="1%" &&/ion-infinite-scroll&
$scope.items = ['item0', 'item1', 'item2', 'item3', 'item4',];
var i = 0;
$scope.loadMoreIf =
$scope.loadMore = function () {
for (var a = 0; a & 5; a++) {
$scope.items.push('item' + i + i)
$scope.$broadcast('scroll.infiniteScrollComplete');
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你需要在&ion-infinite-scroll ng-if="loadMoreIf" on-infinite="loadMore()" distance="1%" &&/ion-infinite-scroll&中添加 immediate-check=”false” 这个属性。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。