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

uniapp使用自定义底部导航,实现页面的的切换

2020年10月16日 17:02:20阅读数:180博客 / 小辰/ Colorui-uniapp的学习
这次使用还是colorui,最近一直在了解这个,自定义导航频闪问题主要是通过在一个vue文件引用多个组件解决,不多说下面就是代码index.vue代码。
  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 v-if="showable"></homePage>
  8. <fenLei v-if ="showable2"></fenLei>
  9. <!-- <scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 375upx)">
  10. <view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list" :key="index" @tap="TabSelect"
  11. :data-id="index">
  12. Tab-{{item.name}}
  13. </view>
  14. </scroll-view> -->
  15. <tabBar @getChild1="getChild1"></tabBar>
  16. </view>
  17. </template>
  18. <script>
  19. import homePage from "./pages/home_page.vue";
  20. import fenLei from "./pages/fen_lei.vue";
  21. export default {
  22. data() {
  23. return {
  24. showable : true ,
  25. showable2 : false
  26. }
  27. },
  28. components: {
  29. homePage,
  30. fenLei
  31. },
  32. onLoad() {
  33. },
  34. methods: {
  35. getChild1(q) {
  36. // this.visible = e
  37. if ( q === 1) {
  38. return this.showable =true;
  39. }else if(q === 2){
  40. this.showable = false
  41. return this.showable2 = true;
  42. }
  43. // console.log(this.showable);
  44. }
  45. }
  46. }

文档结构

tabbar.vue

主要是对页面的切换
  1. <script>
  2. export default {
  3. data() {
  4. return {
  5. // icon:"cuIcon-homefill",
  6. // visible:false
  7. barstyle1:false,
  8. barstyle2:true,
  9. barstyle3:true,
  10. barstyle4:false,
  11. pagenumber : 1
  12. }
  13. },
  14. components: {
  15. },
  16. onLoad() {
  17. },
  18. methods: {
  19. changpage1(){
  20. //首页点击图标变色
  21. this.barstyle1 = false;
  22. this.barstyle2 = true;
  23. //分类变回原来颜色
  24. this.barstyle3 = true;
  25. this.barstyle4 = false;
  26. this.pagenumber = 1;
  27. this.$emit("getChild1",this.pagenumber);
  28. },
  29. changpage2(){
  30. this.barstyle1 = true;
  31. this.barstyle2 = false;
  32. this.barstyle3 = false;
  33. this.barstyle4 = true;
  34. this.pagenumber = 2 ;
  35. this.$emit("getChild1",this.pagenumber);
  36. }
  37. }
  38. }
  39. </script>

home_page.vue

  1. <script>
  2. export default {
  3. data() {
  4. return {
  5. // icon:"cuIcon-homefill",
  6. // visible:false
  7. barstyle1:false,
  8. barstyle2:true,
  9. barstyle3:true,
  10. barstyle4:false,
  11. pagenumber : 1
  12. }
  13. },
  14. components: {
  15. },
  16. onLoad() {
  17. },
  18. methods: {
  19. changpage1(){
  20. //首页点击图标变色
  21. this.barstyle1 = false;
  22. this.barstyle2 = true;
  23. //分类变回原来颜色
  24. this.barstyle3 = true;
  25. this.barstyle4 = false;
  26. this.pagenumber = 1;
  27. this.$emit("getChild1",this.pagenumber);
  28. },
  29. changpage2(){
  30. this.barstyle1 = true;
  31. this.barstyle2 = false;
  32. this.barstyle3 = false;
  33. this.barstyle4 = true;
  34. this.pagenumber = 2 ;
  35. this.$emit("getChild1",this.pagenumber);
  36. }
  37. }
  38. }
  39. </script>

fen_lei.vue

  1. <swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
  2. duration="500">
  3. <swiper-item v-for="(item,index) in 4" :key="index">
  4. <image :src="'https://ossweb-img.qq.com/images/lol/web201310/skin/big3900'+index+ '.jpg'" mode="aspectFill"></image>
  5. </swiper-item>
  6. </swiper>

最后的效果

差不多就是这个样子了,有时间就慢慢完善把

全部评论

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

条评论