vue 学习小结（3）关于‘Splan‘

  

背景

利用vue 以及 py服务端，实现共享计划本（Splan），利用vue的mui，进行简单美化。
vue 学习小结（1）关于v-for
vue 学习小结（2）关于‘Splan‘

1.卡片模式

<div id="app">
	<div class="mui-content" v-for="item in info">
		<div class="mui-card">
			<div class="mui-card-header mui-card-media">
				<img src="images/logo.png" />
				<div class="mui-media-body">
					{{item.username}}
					<p>发表于 {{item.date}}</p>
				</div>
				<!--<img class="mui-pull-left" src="../images/logo.png" width="34px" height="34px" />
				<h2>小M</h2>
				<p>发表于 2016-06-30 15:30</p>-->
			</div>
			<div class="mui-card-content" >
				<div class="mui-card-content-inner">
					{{item.plan}}
				</div>
			</div>
		</div>
	</div>
</div>

效果

2.底部工具栏

利用nav进行简单的底部工具栏设置。

<nav class="mui-bar mui-bar-tab">
	<a class="mui-tab-item" href="index.html">
		<span class="mui-icon mui-icon-home"></span>
		<span class="mui-tab-label">首页</span>
	</a>
	<a class="mui-tab-item" href="pages/input.html">
		<span class="mui-icon mui-icon-email"></span>
		<span class="mui-tab-label">上传计划</span>
	</a>
	<a class="mui-tab-item" href="pages/login.html">
		<span class="mui-icon mui-icon-contact"></span>
		<span class="mui-tab-label">登录</span>
	</a>
</nav>

效果

同时配置简单的js，vue底部工具栏封装严格，利用以下js实现页面简单跳转。

<script type="text/javascript">
(function($){
	$(".mui-scroll-wrapper").scroll({
		bounce: false,//滚动条是否有弹力默认是true
		indicators: true, //是否显示滚动条,默认是true
	});        
})(mui);
//解决 所有a标签 导航不能跳转页面 
mui('body').on('tap','a',function(){document.location.href=this.href;});
</script>

3.其余页面

新建html，input.html（上传计划），login.html（登录）

效果，具体页面逻辑未完成

相关文章
前端开发最新文章
热门教程