标签：vue 工具栏 Splan true 小结 mui 页面

背景

利用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。