页面案例创作

<template>
	<view class="index">
		<view class="creation">
			<view class="creationleft">
				<view class="header">创作中心</view>
				<view class="fomin">
					<view v-for="(it,i) in cate" class="div" :class=" { active: it.isActive }" @click="item(it.id,i)">
						{{it.name}}
					</view>
				</view>
			</view>
			<view class="creationright">
				<view class="empty" v-if="msg == ''">
					<image src="/static/img/wu.png" class="img" mode="widthFix"></image>
					<view class="p">空空如也</view>
				</view>
				<!--数据-->
				<view v-else>
					<view class="min animated" v-for="(it,i) in msg">
						<view>
							<view class="mins">
								<image :src="it.pic" class="img"></image>
								<view class="topr">
									<view class="title">{{it.title}}</view>
									<view class="showx"> 
										<text class="span">
											<i class="iconfont icon-chakan"></i>{{it.view}}
										</text>
										<text class="span">
											<i class="iconfont icon-jiaoliu"></i>{{it.ask}}
										</text>
									</view>
								</view>
							</view>
							<view class="minx">{{it.system}}</view>
						</view>
						<view class="shoucang" :class="{ hover: it.shoucang }"> 
							<i class="iconfont icon-shoucang"></i>收藏
						</view>
					</view>
					<view class="jiabnt">点击加载更多..</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
	            msg: [],
				cate: [],
				page:'1',
				page:'index'
	        }
	    },
		onLoad() {
			this.item(false,false)
			this.item_cate()
		},
	    methods: {
			goToPage(url,tab) {
				if (!url) {
					return;
				}else{
					if(tab){
						uni.switchTab({
							url: url
						});
					}else{
						uni.navigateTo({
							url:url,
							animationType: this.msg.animation,
						});
					}
				}
			},
	        item_cate() { 
				// 加载分类
				uni.request({
					url:uni.getStorageSync('www')+'/index.php/apps/api/creation.html',
					data: {
						uid: uni.getStorageSync('uid'),
						type: 'cate',
					}, 
					method: 'POST', 
					success: (res) => {
						this.cate = res.data.data.cate;
					}
				});
			},
			item(index,i) {
				if(i){
					uni.pageScrollTo({ 
						scrollTop: 0, duration: 300 
					});
					var cate = this.cate;
					for(var o in cate){
						cate[o]['isActive'] = false;
					};
					cate[i]['isActive'] = true;
					this.cate = cate
					this.msg = true
					this.id = index
					this.page = 1
				}
				// 加载消息
				uni.request({
					url:uni.getStorageSync('www')+'/index.php/apps/api/creation.html?page='+this.page,
					data: {
						uid: uni.getStorageSync('uid'),
						tid: this.id,
					}, 
					method: 'POST', 
					success: (res) => {
						this.msg = res.data.data.list;
						uni.setNavigationBarTitle({
						　　title:res.data.data.title
						})
						this.page += 1
						console.log(this.page);
					}
				});
			}
	    }
	}
</script>

<style>
	page {
		background-color: #f2f5f9;
		/* overflow: hidden; */
	}
	.creation {
	    width: calc(100% - 20px);
	}
	.creation .header {
		line-height: 70px;
		    background-color: #1e9fff;
		    color: aliceblue;
	 
		  } 
	.creation .creationleft {
	    position: absolute;
	    top: 0;
	    left: 0;
	    height: calc(100% - 0px);
	    background: #fff;
	    width: 120px;
		text-align: center;
	 
			position: absolute;
	}
	.creation .creationleft .fomin {
	    overflow: auto;
	    height: calc(100% - 70px);
	    background: #fff;
	    width: 100%;
	}
	.creation .creationleft .fomin .div {
	    line-height: 50px;
	    cursor: pointer;
	    background-color: #fff;
	    margin: 10px;
	    font-size: 14px;
	    border-radius: 5px;
	}
	.creation .creationleft .fomin .active {
	    background-color: #1e9fff;
	    color: #fff;
	}
	.creation .creationright {
	    position: absolute;
	    top: 5px;
	    right: 5px;
	    overflow: auto;
	    height: calc(100% - 10px);
	    width: calc(100% - 130px);
	}
	
	.creation .creationright .min {
	    width: calc(100% - 30px);
	    background-color: #fff;
	    margin: 5px;
	    padding: 10px;
	    border-radius: 5px;
	    position: relative;
	}
	.creation .creationright .min .mins {
	    overflow: auto;
	}
	.creation .creationright .min .mins .img {
	    width: 50px;
		height: 50px;
	    float: left;
	    background-color: #fff;
	    border-radius: 5px;
	    padding: 5px;
	    border: 1px solid #f2f2f2;
	}
	.creation .creationright .min .mins .topr {
	    float: right;
	    width: calc(100% - 70px);
	    text-align: left;
	}
	.creation .creationright .min .mins .topr .title {
	    color: #000;
	    font-size: 18px;
	    font-weight: 700;
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}
	.creation .creationright .min .mins .topr .showx {
	    font-size: 14px;
	    margin-top: 11px;
	}
	.creation .creationright .min .mins .topr .showx .span {
	    margin-right: 20px;
	}
	.creation .creationright .min .mins .topr .showx .span i {
	    margin-right: 10px;
	}
	.creation .creationright .min .minx {
	    font-size: 14px;
	    text-align: left;
	    margin-top: 15px;
	    height: 60px;
	    color: #909090;
	    overflow: hidden;
	}
	.creation .creationright .min .shoucang {
	    position: absolute;
	    bottom: 5px;
	    right: 5px;
	    background-color: #a9a9a9;
	    color: #fff;
	    font-size: 12px;
	    padding: 2px 5px;
	    border-radius: 5px;
	    z-index: 1;
	    cursor: pointer;
	}
	.empty{background-color:#fff;text-align:center;font-weight:700;color:#1e9fff;padding:30px}
	.empty .img{width:60%}
	.empty .p{margin-top:30px}
	.jiabnt {
	    cursor: pointer;
	    background-color: #1e9fff;
	    padding: 10px;
	    color: #f0f8ff;
	    font-size: 16px;
	    border-radius: 5px;
	    margin: 10px auto;
	}
</style>