登录  /  注册
博主信息
博文 26
粉丝 0
评论 2
访问量 33907
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
colorui-uniapp对于底部操作条的使用
小辰
原创
3129人浏览过

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

照着直接用上去就可以了照着直接用上去就可以了
  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
个人感觉写的不错

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学