前端动画效果开发swiper_上下手势拉动动态加载数据

前端动画都是用什么开发？|web开发前端开发需要学什么？|为什么要转前端开发?

匆忙过去了一个月的时间。华商的APP及web项目终于基本做好了，闲来做个笔记小结一下。

一， ajax传数据及模板总结

（为了便于后台人员的开发，写的网页不再是停留在静态页面层次了，而是需要写json模板，通过 tomcat以及后台服务器，演示数据调用结果。）

二，关于swiper插件的上下手势滑动的判断

1.以往，通过 js动态给页面中添加一个div层或者还有嵌套的几层div,通常会用如下这样的形式：

result+=[

“<div class=\”boxlist\”>”

+”<div class=\”boxlisttext\”>标题：<b>”+array.name+”<b></div>”

+”<div class=\”boxlisttext\”>链接：<b>+array.url+”<b></div>”

+”</div>”

].join(” “);

可是在=在写一些斜杠的时候容易出现问题。

现在写一些动态添加的模板会使用另一个方法：先引入[color=Red] jsrender.min.js[/color]，然后在页面中写一个模板和json数据，例如

<!—-模板—>

<script type=”text/x-jsrender” id=”[color=Red]adddata-template[/color]”>//这里的id是自己定义的，需要与后面的传入数据容器名称对应即可

<div class=”swiper-slide”>

<div class=”list” onclick=”window.location.href=’detail.html'”>

<div class=”lefttext”>

<h1>[color=Red]{{>title}}[/color]</h1> //这里传入的是参数模型，用两个双括号加一个大于号加参数表示

<p>[color=Red]{{>wordcnt}}[/color]</p>

</div>

<div class=”rightpic”><img src=[color=Red]{{>url}}[/color]></div>

</div>

</div>

</script>

<!—-json数据—>

//定义json数据,假设这个json给它命名为[color=Red]dynamic.json[/color]，这样写后，后台人员自然就知道怎么建表了。

vardataInt={

“pics”:[

{

“title”:”全部刷新的标题1″,

“src”:”images/banner_b.jpg”

},

{

“title”:”全部刷新的标题1″,

“src”:”images/banner_a.jpg”

}

],

“datas” :

[

{

“title”:”全部刷新的标题1″,

“wordcnt”:”全部刷新的文字内容”,

“url”:”images/pic_a.jpg”

},

{

“title”:”全部刷新的标题2″,

“wordcnt”:”全部刷新的文字内容”,

“url”:”images/pic_a.jpg”

},

{

“title”:”全部刷新的标题3″,

“wordcnt”:”全部刷新的文字内容”,

“url”:”images/pic_a.jpg”

}

],

‘items’:[

{

“title”:”尾部新增的标题1″,

“wordcnt”:”尾部新增的文字内容”,

“url”:”images/pic_b.jpg”

},

{

“title”:”尾部新增的标题2″,

“wordcnt”:”尾部新增的文字内容”,

“url”:”images/pic_b.jpg”

},

{

“title”:”尾部新增的标题3″,

“wordcnt”:”尾部新增的文字内容”,

“url”:”images/pic_b.jpg”

},

{

“title”:”尾部新增的标题4″,

“wordcnt”:”尾部新增的文字内容”,

“url”:”images/pic_b.jpg”

},

{

“title”:”尾部新增的标题5″,

“wordcnt”:”尾部新增的文字内容”,

“url”:”images/pic_b.jpg”

},

{

“title”:”尾部新增的标题6″,

“wordcnt”:”尾部新增的文字内容”,

“url”:”images/pic_b.jpg”

}

]

}

而ajax传数据可以这样写：

$.ajax({

type:”POST”,

url:”json/[color=Red]dynamic.json[/color]”,//这里注意路径问题，json文件的路径是以html页面作为基准的，而不是以当前这个js文件，这是初学时容易犯的错误

success:function(response){//这里的 response参数作为 ajax请求成功后传回来的数据

/*************加载数据********************************/

$.each(response.links,function(index,value){//循环遍历

varhtml=$(‘[color=Red]#adddata-template[/color]’).render(value);

mySwiper.appendSlide(html);

})

}

});

2.遇到的第二个难点是手势滑动上下的判断。

虽然可以用简单的方法判断页面是否到底不以及到顶部，如：

window.onload=function(){

varscrollTop=$(this).scrollTop();

varscrollHeight=$(document).height();

varwindowHeight=$(this).height();

if(scrollTop+windowHeight==scrollHeight){

alert(“到达底部了”)

}

elseif(scrollTop==0){

alert(‘滑到页面顶部’)

}

}

问题是这样的体验相对于原生 js的那种手势滑动，有一个橡皮筋的那种拉动回弹效果就没有了。

于是决定借用swiper插件了，这个插件还是很不错的！

首先按照官网示例上的写法写好HTML页面结构后，一定不要忘了页面中与swiper-wrapper平级的 <div class=”swiper-scrollbar”></div>不能缺少。

然后js写法上，例如：

var mySwiper = new Swiper(‘.all-container’, {

scrollbar: ‘.swiper-scrollbar’,

direction: ‘vertical’,

slidesPerView: ‘auto’,

mousewheelControl: true,

freeMode: true,

onTouchEnd: function(swiper){

if(swiper.translate>60){ //判断下拉刷新

$(‘.uptipsgray’).addClass(‘visible’);//下拉刷新的div显示

loadNewData();//加载更多数据

}

elseif(swiper.translate<-40){ //判断上拉加载新数据

if(mySwiper.isEnd){

//mySwiper.isEnd这个函数用来判断时候滑动到底部，但是不能单独的用这个来写，还需要在外层写一个swiper.translate<-40，是为了需要先判断是手势是上拉还是下拉，否则可能造成了点击页面，还没设计到上下拉就执行里面的函数了，这里的40也不 是固定的，只是为了先判断手势方向，再判断是否到底

$(‘.tipsgray’).addClass(‘visible’);

loadHistoryData();

}

}

}

});

app前端混合开发|h5响应式前端开发|三七互娱h5游戏前端开发