先祝大家新年快乐哈~~
19年2月11日,毕设目前开发到第二阶段了,总结一下最近的坑和点。
- 第一点是过完年回来开发feed流模块,遇到了使用js滚动条下滑底部触发ajax请求更多数据,这个只算个点,计算好窗口滚动到底部的距离,然后使用ajax请求服务器拉去redis的数据就行,因为我这是流,在数据源足够大的情况下,是可以一直向下滚动拉去数据,知道数据源数据全部读取完毕为止。我的毕设是当访问流首页的时候,会取数据源(下面简称池子)里的前10条,因为我的前端一屏只展示10条,向下滚动的话就会出发ajax获取更多数据通过js向ul标签里追加html代码,这样的话能将从服务器端获取的信息加工后插入原有流的底部。这里有个问题就是当前流的偏移量和获取量的设置,偏移量我是直接用js获取ul对象,然后获取ul对象下的li的个数,这样的话每次ajax请求的时候都会获取一下当前li的个数,这个个数就代表着偏移量,而获取量为了简单,我直接用偏移量+10这样offset和size都有了,就能很方便的获取redis中排好序的流数据了。
(function ($){ var $tiles = $('#tiles'), $handler = $('li', $tiles), $main = $('#main'), $window = $(window), $document = $(document), options = { autoResize: true, // This will auto-update the layout when the browser window is resized. container: $main, // Optional, used for some extra CSS styling offset: 20, // Optional, the distance between grid items itemWidth:280 // Optional, the width of a grid item }; /** * Reinitializes the wookmark handler after all images have loaded */ function applyLayout() { $tiles.imagesLoaded(function() { // Destroy the old handler if ($handler.wookmarkInstance) { $handler.wookmarkInstance.clear(); } //创建处理对象 $handler = $('li', $tiles); $handler.wookmark(options); }); } /** * 滚动事件函数 */ function onScroll() { // 设置触发高度 var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100); //获取当前ul对象 var tiles = document.getElementById('tiles'); //获取当前ul下li标签的个数 var li_num = tiles.getElementsByTagName('li').length; //赋值偏移量及每次增量请求个数 var offset = li_num; var size = offset + 10; if (closeToBottom) { $.ajax({ url:'more_feed_info', type:'POST', dataType:'json', data:{'offset':offset,'size':size}, success:function (data) { if (data.error_code == 0){ for (var i = 0 ; i < data.rdata.length ; i++){ //拼凑html var popContent = '<a href="'+data.rdata[i].jump_to+'" target="_blank">'+ '<li>'+ '<img src="'+data.rdata[i].image+'" width="200" height="333">'+ '<div class="post-info">'+ '<div class="post-basic-info">'+ ' <h3><a href="#">'+data.rdata[i].article_name+'</a></h3>'+ '<span><a href="#"><label></label>'+data.rdata[i].article_author+'</a></span>'+ '<p>'+data.rdata[i].article_intro+'</p>'+ '</div>'+ '<div class="post-info-rate-share">'+ '<div>'+ ' <span style="font-size: smaller;color: rgba(96,98,138,0.34)">'+data.rdata[i].modification_time+'</span>'+ '</div>'+ '<div>'+ ' <span> </span>'+ '</div>'+ '<div class="clear"> </div>'+ '</div>'+ '</div>'+ '</li>'+ '</a>' //将拼凑好的html追加到对象中 $tiles.append(popContent); applyLayout(); } } }, error:function (error) { alert('网络异常'); } }); } }; applyLayout(); $window.bind('scroll.wookmark', onScroll); })(jQuery);
-
是我的一个小坑,我使用ci框架登录后获取用户信息并将用户信息存在临时session即ci中的tempdata中,当我退出登录的时候只unset了user_id,并没有注销其他的信息比如用户头像和昵称,这就导致了,当切换账号登录的时候,上个用户的头像发及昵称仍然存在,在我检查了session内的数据后发现这个问题,就修改了,在此记录一下。
-
这个是关于html属性的。我的毕设里要实现给信息点赞或者踩及关注的功能,于是我就找了俩赞踩图片放在页面里,看着还行,但是如果加上了button,他们仨就虽然在一行但是不能垂直对齐,这就很痛苦,我百度了一下,最后决定使用html属性中的vertical-align:middle 这个属性,加在了这三个东西后面然后就可以完美对齐
<div class="clear"> <span><a href="javascript:void(0)"><image src = "<?php echo site_url('assets/images/good.png')?>" style="vertical-align: middle"></image></a></span> <span><a href="javascript:void(0)"><image src = "<?php echo site_url('assets/images/bad.png')?>" style="vertical-align: middle"></image></a></span> <span><button style="vertical-align: middle">关注作者</button></span> </div>