本篇笔记是js动态加载数据后原数据列表的滚动效果消失的处理办法。
其实已经很久没有写前端页面了。最近换了一份工作，全公司将近100多个技术人员只有一个前端开发，所以前端压力还是比较大的，因此很多页面也都由后端技术来完成。在本篇笔记的最后也为大家分享一个纯静态的转盘抽奖页面。
在很多项目中前端工程师开发的静态页面基本上效果很明显就可以看到。比如列表的滚动，但是后端往往在清除掉静态页面中的div或li标签后，通过ajax获取动态数据载入页面后发现原先的滚动效果会失效。其实原因很简单，就是外层容器缺少了高度值，所以我们只需要在数据列表的外层容器上加上高度属性即可。
比如我们通过JS将动态获取的数据加载到id为"ulists"的容器时。
- $(function(){
- $.ajax({
- url: '#',
- type: 'post',
- dataType: 'json',
- data: {
- service:'Login.Zhongjiang',
- user_id:user_id
- },
- async : true,
- success: function (result) {
- var arrs = result.data.shuju;
- var htmm = "";
- if(arrs.length > 0){
- for(var i=0;i< arrs.length;i++){
- htmm += '<li class="huojiang">'
- +'<p class="fl">获得'+arrs[i].prize_name+'现金红包</p>'
- +'<p class="fr">'+arrs[i].real_name+'</p>'
- +'</li>';
- }
- }
- document.getElementById("ulists").innerHTML = htmm;
- }
- })
- })
只需要给id为"ulists"的容器设置一个高度属性即可。
最后就是一个小小的福利。一款很不错的纯静态转盘抽奖HTML分享给大家。
下载地址：
此处为隐藏的内容！
发表评论并刷新，才能查看
