背景利用vue 以及 py服务端,实现共享计划本(Splan),利用vue的mui,进行简单美化。 vue 学习小结(1)关于v-for vue 学习小结(2)关于‘Splan‘1.卡片模式div id=appdiv class=mui-content v-for=ite...
背景
利用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 学习小结(3)关于‘Splan‘
基础教程推荐
猜你喜欢
- Ajax提交表单并接收json实例代码 2023-02-13
- Unicode中的常用字母小结 2022-09-21
- 解决:layUI数据表格+简单查询 2022-12-16
- 纯javascript的ajax实现php异步提交表单的简单实例 2022-12-28
- AJax 把拿到的后台数据在页面中渲染的实例 2023-02-22
- 关于ajax异步访问数据的问题 2023-02-23
- 在IE中为abbr标签加样式 2022-10-16
- ajax实现数据分页查询 2023-01-31
- JavaScript垃圾回收机制(引用计数,标记清除,性能优 2022-08-31
- 原生ajax瀑布流demo分享(必看篇) 2023-02-01