前端动画效果开发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游戏前端开发
» 本文来自:前端开发者 » 《前端动画效果开发swiper_上下手势拉动动态加载数据》
» 本文链接地址:https://www.rokub.com/4528.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!