1 <template> 2 <div class="wrapper"> 3 <div class="toparea clearfix"> 4 <span class="back" @click="$router.back(-1)">返回</span> 5 评论详情 6 <span class="fatie" @click="goToFatie">发帖</span> 7 </div> 8 <div class="itemblock" v-for="item in listcontent" :key="item.id" > 9 <!--id：{{item.id}}--> 10 <p class="nameandtime">{{item.name}} {{item.add_time}}</p> 11 <p class="content" v-html="item.text">{{item.text}}</p> 12 </div> 13 <div>{{loadmsg}}</div> 14 <Footer></Footer> 15 </div> 16 17 </template> 18 <script> 19 import thisbq from '@/api/bq.js' 20 import Footer from "../components/Footer.vue"; 21 export default { 22 data() { 23 return { 24 id:this.$route.params.id, 25 listcontent: [], //循环数组 26 page : 1, //默认第一页 27 pagesize : 10, //每页的条数 28 page_total : 0, //总记录条数 29 scrollTop:0,//滚动条位置 30 clientHeight:0,//可视区高 31 scrollHeight:0,//滚动区域 32 noMoreData: false, //是否停止加载 false:不停止 true:停止加载 33 loadmsg: '加载中......' 34 } 35 }, 36 created() { 37 this.fetchList() 38 }, 39 mounted() { 40 window.addEventListener('scroll', this.bindScroll); 41 }, 42 watch: { 43 //观察滚动条位置 44 scrollTop:function(){ 45 if ((this.scrollHeight-1) <= (this.clientHeight + this.scrollTop)) { 46 if(this.noMoreData) return false; 47 this.fetchList(); 48 } 49 } 50 }, 51 methods: { 52 goToFatie(){ 53 this.$router.push('/Fatie') 54 }, 55 //html encode 56 html_encode(str) { 57 var s = ""; 58 if (str.length == 0) return ""; 59 s = str.replace(/&/g, ">"); 60 s = s.replace(/</g, "<"); 61 s = s.replace(/>/g, ">"); 62 s = s.replace(/ /g, " "); 63 s = s.replace(/\'/g, "'"); 64 s = s.replace(/\"/g, """); 65 s = s.replace(/\n/g, "<br>"); 66 return s; 67 }, 68 //html decode 69 html_decode(str) { 70 var s = ""; 71 if (str.length == 0) return ""; 72 //s = str.replace(/>/g, "&"); 73 s = str; 74 //s = s.replace(/</g, "<"); 75 //s = s.replace(/>/g, ">"); 76 //s = s.replace(/ /g, " "); 77 //s = s.replace(/'/g, "\'"); 78 //s = s.replace(/"/g, "\""); 79 s = s.replace(/<br>/g, "<br>"); 80 s = s.replace(/\[br\]/g, "<br>"); 81 //s = s.replace(/'/g, "\'"); 82 return s; 83 }, 84 //评论中的URL链接加a链接 85 checkHttpUrl(str){ 86 var regx = /(((http|https):\/\/(www\.)?)|www\.)[^\u0391-\uFFE5\s]*/gi; 87 var res = str.match(regx); 88 var m = ""; 89 if(res != null && res.length != 0){ 90 for(i=0;i<res.length;i++){ 91 m = res[i]; 92 if(res[i].indexOf("http://") >= 0){ 93 m = res[i].substring(7,res[i].length); 94 } 95 if(res[i].indexOf("https://") >= 0){ 96 m = res[i].substring(8,res[i].length); 97 } 98 99 m = "http://"+m; 100 str = str.replace(res[i],"<a href='"+m+"' target='_blank'>"+res[i]+"</a>"); 101 } 102 } 103 return str; 104 }, 105 //替换语句中的GIF为图片base64方式 106 checkBiaoQing(msg){ 107 if(msg.indexOf("{biaoqing}") >=0 ){ 108 let bq_arr = msg.match(/\{biaoqing\}(.*?)gif\{\/biaoqing\}/g); 109 110 let i="" 111 for(i=0;i<bq_arr.length;i++){ 112 bq_arr[i] = bq_arr[i].replace('{biaoqing}',''); 113 bq_arr[i] = bq_arr[i].replace('.gif{/biaoqing}','')-1; 114 msg=msg.replace(/\{biaoqing\}(.*?)\{\/biaoqing\}/, "<img src=" + thisbq.bq[bq_arr[i]] + ">") 115 } 116 117 /*msg = msg.replace(/\{biaoqing\}/g,"<img src='"+pri_fix); 118 msg = msg.replace(/\.gif\{\/biaoqing\}/g,"' />");*/ 119 } 120 return msg; 121 }, 122 fetchList(){ 123 if(this.noMoreData ) return false; 124 this.GLOBAL.postData.set('id', this.id) 125 this.GLOBAL.postData.set('page', this.page) 126 this.GLOBAL.postData.set('pagesize', this.pagesize) 127 this.page ++; 128 //预判是否去请求下一页 129 if(this.page_total > 0) { 130 if((this.page * this.pagesize) > this.page_total) { 131 this.noMoreData = true; 132 this.loadmsg = '我也是有底限的~'; 133 return false; 134 } 135 } 136 this.$ajax 137 .post("v1/articles/comment_lists",this.GLOBAL.postData) 138 .then(response => { 139 this.page_total = response.data.total 140 //返回信息判断 141 if(response.data.error_code == 0 && response.data.data) { 142 //新建数据对象并修改，然后将新的数据对象复制与this.comment_lists 143 let i 144 let comment_lists_old = response.data.data 145 for (i = 0; i < response.data.data.length; i++) { 146 comment_lists_old[i]['text'] = this.html_decode(response.data.data[i].text) 147 comment_lists_old[i]['text'] = this.checkBiaoQing(comment_lists_old[i]['text']) 148 } 149 150 this.listcontent = this.listcontent.concat(comment_lists_old); 151 //this.listcontent = this.listcontent.concat(response.data.data); //追加分页数据 152 //判断下一页是否还有数据 153 if((this.page * this.pagesize) >= this.page_total) { 154 this.noMoreData = true; 155 this.loadmsg = '我也是有底限的~'; 156 return false; 157 } 158 } 159 160 }) 161 .catch(error => { 162 console.log(error.message); 163 }); 164 }, 165 bindScroll(){ 166 this.scrollTop= document.documentElement.scrollTop; 167 this.scrollHeight=document.documentElement.scrollHeight; 168 this.clientHeight=document.documentElement.clientHeight; 169 } 170 }, 171 components: { 172 Footer 173 } 174 }; 175 </script> 176 <style scoped> 177 .wrapper{ 178 margin:10px; 179 padding-top:50px; 180 } 181 .itemblock{ 182 margin-bottom: 15px; 183 margin-top:0px; 184 border-bottom: solid 1px #e4e4e4; 185 padding-bottom: 15px; 186 187 } 188 .itemblock .nameandtime{ 189 font-size:14px; 190 color:#999; 191 margin-bottom: 5px; 192 } 193 .itemblock .content{ 194 font-size:14px; 195 } 196 .toparea{ 197 position:fixed; 198 top:0px; 199 left:0px; 200 right:0px;} 201 .back{ 202 position: absolute; 203 left:12px; 204 font-size: 12px; 205 } 206 .fatie{ 207 position: absolute; 208 right:12px; 209 font-size: 12px; 210 } 211 </style>
VueJS 列表下拉刷新 自动加载 demo
猜你喜欢
转载自www.cnblogs.com/handle/p/12119064.html
今日推荐
周排行