lzf
/
djfp-app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
							<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>新闻列表</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/menu.min.css" rel="stylesheet" />
		<style>
		    .top{position: fixed;width: 100%;z-index: 666;top:-1px ; background-color: white;overflow: hidden;box-shadow: 0 1px 6px #ccc;}
		    .ui.secondary.pointing.menu{overflow:auto;border-bottom:0px;margin-top: 65px;}
			.ui.secondary.pointing.menu::-webkit-scrollbar {display:none}
		    .main{margin-top: 115px;background-color: white;}
		    .items{padding: 15px;font-size: 15px;color: #3a3939;border-bottom: 1px solid #efefef;}
		    .items:last-child{border: 0px;}
		    .cn{font-size: 10px;color: darkgray;padding-top: 3px;}
		    .dc{padding-left: 5px;}
		    .isTop{color: red;font-weight: bold;}
		    .icon{font-size: 48px;display: block;}
		    [v-cloak] {display: none;}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="mui-content">
				<div class="top">
					<header class="mui-bar mui-bar-nav">
						<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
						<h1 class="mui-title">{{param.type}}</h1>
					</header>
					<div class="ui secondary pointing menu">
						<a class="item" :style="{'color':index==current?'#00a0ea':'','border-bottom':index==current?'4px solid #00a0ea':''}" v-for="(item,index) in column_list" @click="selected(param.columnId=item.id,current=index)">{{item.mColumnName}} </a>
					</div>
				</div>
				<div class="main" v-if="news_list.length>0">
						<div class="items" v-for="(item,index) in news_list" @click="detail(item.id)">
							<div class="omit">{{item.mTitle}}</div>
							<div class="cn">
								<span class="isTop" v-show="item.isTop==1">置顶</span> 
								<span class="dc"> {{item.mColumnName}}</span> 
								<span class="dc"> {{item.mTime.substring(0,16)}}</span>
							</div>
						</div>
				</div>
				<div class="no_data" v-else>
					<i class="icon">&#xe65f;</i>没有数据
				</div>
					<!--加载更多-->
					<div class="more">
						<div class="loading" v-if="loading">
							<span class="mui-spinner"></span>
							<div class="mc">加载中...</div>
						</div>
					</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					news_list:[],
					column_list: [],
					param: {page: 1,type:'时政信息','columnId':''},
					current: 0,
					loading: false,
					hasMore: false,
				},
				mounted: function() {
					mui.plusReady(function() {
					var obj = plus.webview.currentWebview();
					vm.param.type=obj.param.type;
					request(urls().column, {mType: obj.param.type=='时政信息'?1:2}, function(res) {
						vm.column_list.push({mColumnName:'最近文章',id:''})
						res.forEach(function(item){
							vm.column_list.push(item);
						})
						plus.nativeUI.closeWaiting();
					  })
					   vm.getData();
				    })
					//监听滚动加载
					window.addEventListener('scroll', function() {
						//滚动高度+内高度>=文档高度  
						if(document.body.scrollTop + window.innerHeight + 20 >= document.body.offsetHeight) {
							if(vm.hasMore) {
								vm.loading = true;
								//避免重复加载
								vm.hasMore = false;
								vm.param.page++;
								setTimeout(function() {
									vm.getData()
								}, 1000);
							}
						}
					})
				},
				methods: {
					//获取数据
					getData: function() {
						request(urls().news_list, this.param, function(res) {
							res.rows.forEach(function(item) {
								vm.news_list.push(item);
							});
							vm.hasMore = vm.param.page < res.total ? true : false;
							vm.loading = false;
							plus.nativeUI.closeWaiting();
						})
					},
					//选择栏目
					selected: function(columnId, index) {
						vm.refresh();
					},
					//详情
					detail: function(id) {
						open('news_detail', 'detail.html', {id: id}, 'slide-in-bottom');
					},
					//刷新
					refresh: function() {
						vm.news_list = [];
						vm.param.page = 1;
						vm.getData();
					}
				}
			})
		</script>
	</body>

</html>