博主信息
小辰
博文
26
粉丝
0
评论
2
访问量
3614
积分:0
P豆:52

colorui-uniapp对于底部操作条的使用

2020年10月14日 17:26:46阅读数:138博客 / 小辰/ Colorui-uniapp的学习

一开始觉得这个比较简单,后来看了一下文档。自己实现的时候还是会有问题,你会发现效果有了,位置不对,不能产生点击后的效果,感觉就像一张图片,下面是效果的简单实现。

照着直接用上去就可以了照着直接用上去就可以了
  1. <template>
  2. <view class="cu-bar tabbar margin-bottom-xs bg-white foot">
  3. <view class="action text-green">
  4. <view class="cuIcon-homefill"></view> 首页
  5. </view>
  6. <view class="action text-gray">
  7. <view class="cuIcon-similar" @click="changpage()"></view> 分类
  8. </view>
  9. <view class="action text-gray add-action">
  10. <button class="cu-btn cuIcon-add bg-green shadow"></button>
  11. 发布
  12. </view>
  13. <view class="action text-gray">
  14. <view class="cuIcon-cart">
  15. <view class="cu-tag badge">99</view>
  16. </view>
  17. 购物车
  18. </view>
  19. <view class="action text-gray">
  20. <view class="cuIcon-my">
  21. <view class="cu-tag badge"></view>
  22. </view>
  23. 我的
  24. </view>
  25. </view>
  26. </template>
操作条相关class
  • cu-bar 底部操作条必选值 ——
  • tabbar 底部操作条必选值 ——
  • foot 固定定位在页面底部 ——
  • add-action 小程序tabBar的midButton ——
  • shop 购物操作条必选值 ——
  • submit 提交按钮 ——
  • border-title 带下边框样式的标题 ——
  • sub-title 带副标题样式的标题 ——
  • self-end css属性align-self: flex-end; ——
  • search-form 搜索框 ——
  • input 输入框样式 ——

做完这些可以直接封装起来,作为一个全局组件,想在哪里用就可以在哪里用,这个比较简单就不说了。还有一种方法可以直接在主页中引入多个页面,在主页面进行切换显示。这样可以解决切换时闪烁的问题。主要是通过点击导航栏的内容,对页面数据进行修改,用v-if判断这个改变的数据,来实现页面的切换与导航栏图标的变化,我这里就简单的做了一下。

  1. <template>
  2. <view>
  3. <cu-custom bgColor="bg-gradual-blue" :isBack="true">
  4. <block slot="backText">返回</block>
  5. <block slot="content">导航栏</block>
  6. </cu-custom>
  7. <homePage></homePage>
  8. <tabBar></tabBar>
  9. </view>
  10. </template>
  11. <script>
  12. import homePage from "./pages/home_page.vue";
  13. export default {
  14. data() {
  15. return {
  16. }
  17. },
  18. components: {
  19. homePage
  20. },
  21. onLoad() {
  22. },
  23. methods: {
  24. }
  25. }
  26. </script>

就是这些了,嘿嘿,给大家推荐一下一个简单的教程https://blog.csdn.net/miao_yf/article/details/102971767#layout%E5%B8%83%E5%B1%80
个人感觉写的不错

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 把JavaScript文件放在Html是因为浏览器加载完JS文件就会去执行,这时候如果JS里面有DOM话,DOM可能还未加载完,就会出错,另外由JS页面展示来说没什么,所以应首先加载
    四个分是:1、数据定义,定义SQL模式、基本表、视图和索引创建和撤消;2、数据纵,分成数据查询和数据更新两类;3、数据控制,包括基本表和视图授权,完整性规则描述,事务控制等内容;4、