其他分享
首页 > 其他分享> > vue 学习小结(3)关于‘Splan‘

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(登录)
在这里插入图片描述
效果,具体页面逻辑未完成
在这里插入图片描述
在这里插入图片描述

标签:vue,工具栏,Splan,true,小结,mui,页面
来源: https://blog.csdn.net/qq_41854291/article/details/115287122