devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp 学习笔记三十五 首页底部菜单独立封装_uniapp 做一个圆弧形菜单

作者：Monodyee | 2024-02-19 22:06:48

赞

踩

uniapp 做一个圆弧形菜单

uniapp 学习笔记三十五 首页底部菜单独立封装

homee.vue

  1. <template>
  2.     <scroll-view class="scroll-cont" :scroll-into-view="topItem" @scroll="handleScroll" scroll-y="true" scroll-with-animation="true">
  3.         <view>
  4.             <view id="top"></view>
  5.             <!-- 自定义导航栏 -->
  6.             <nav-custom></nav-custom>
  7.             <!-- 轮播 -->
  8.             <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
  9.                 <swiper-item v-for="(item,index) in banner" :key="item.objectId">
  10.                     <image :src="item.img" @tap="handleBanner(item.link)"></image>
  11.                 </swiper-item>
  12.             </swiper>
  13.             <home-title
  14.                 title="本季推荐" 
  15.                 en-title="Seasonal Recommend" 
  16.                 en-tit="Seasonal" 
  17.             ></home-title>
  18.             <scroll-view scroll-x="true" >
  19.                 <view class="scroll-inner">
  20.                     <image src="../../static/logo.png" mode="heightFix"></image>
  21.                     <image src="../../static/logo1.png" mode="heightFix"></image>
  22.                     <image src="../../static/logo.png" mode="heightFix"></image>
  23.                     <image src="../../static/logo1.png" mode="heightFix"></image>
  24.                 </view>
  25.             </scroll-view>
  26.             
  27.             <home-title
  28.                 title="法式经典" 
  29.                 en-title="French Classic" 
  30.                 en-tit="French" 
  31.             ></home-title>
  32.             <image class="classify" src="../../static/logo.png" mode=""></image>
  33.             
  34.             <view class="flex flex-wrap padding-sm justify-between">
  35.                 <good-item v-for="(item,index) in 4"></good-item>
  36.             </view>
  37.             
  38.             <view class="back-top" v-if="isShowGoTop" @tap="handleBackTop">
  39.                 <text class="iconfont icon-huidingbu"></text>
  40.             </view>
  41.         </view>
  42.         <tab-custom></tab-custom>
  43.     </scroll-view>
  44. </template>
  45.  
  46. <script>
  47.     // 局部引入封装的 promise $http
  48.     import {$http} from '@/utils/request.js'
  49.     export default {
  50.         data() {
  51.             return {
  52.                 isShowGoTop:false,
  53.                 topItem:'', //返回顶部的标记点
  54.                 banner:[]
  55.             }
  56.         },
  57.         methods: {
  58.             handleScroll(ev){
  59.                 // console.log(ev.detail);
  60.                 let {scrollTop} = ev.detail
  61.                 this.isShowGoTop = scrollTop >600
  62.                 this.topItem = '' //重置定位返回点
  63.             },
  64.             handleBackTop(){
  65.                 this.topItem = 'top'
  66.             },
  67.             handleBanner(link){
  68.                 uni.navigateTo({
  69.                     url:`banner-ad?link=${link}`
  70.                 })
  71.             }
  72.         },
  73.         onLoad() {
  74.             // 方法三 使用全局封装的 $get方法
  75.             this.$get('/1.1/classes/banner').then(res=>{
  76.                 this.banner = res.results //取回数据并指定到swiper
  77.             })
  78.             
  79.         }
  80.     }
  81. </script>
  82.  
  83. <style lang="scss">
  84. .back-top{
  85.     height: 100upx;
  86.     width: 100upx;
  87.     background-color: #fff;
  88.     border-radius: 50%;
  89.     box-shadow: 0 0 10upx 4upx rgba(0, 0, 0, 0.4);
  90.     position: fixed;
  91.     bottom: 40upx;
  92.     right: 20upx;
  93.     text-align: center;
  94.     line-height: 100upx;
  95. }
  96. .classify{
  97.     height: 380upx;
  98.     width: 100%;
  99. }
  100. .scroll-inner{
  101.     white-space: nowrap;
  102.     image{
  103.         height: 290upx;
  104.         width: auto;
  105.     }
  106. }
  107.  
  108. .banner{
  109.     height: 1000upx;
  110.     swiper-item{
  111.         height: 1000upx;
  112.     }
  113.     image{
  114.         width: 100%;
  115.         height:1000upx
  116.     }
  117. }
  118. .scroll-cont{
  119.     height: 100vh;
  120. }
  121. </style>

main.js

  1. import App from './App'
  2. import store from 'store/index.js' //引入自定义的store
  3.  
  4. // #ifndef VUE3
  5. import Vue from 'vue'
  6. Vue.config.productionTip = false
  7. App.mpType = 'app'
  8. const app = new Vue({
  9.     ...App,
  10.     store  //注入状态机
  11. })
  12.  
  13. // 全局引入uView主JS库
  14. import uView from '@/uni_modules/uview-ui'
  15. Vue.use(uView)
  16.  
  17. // 全局引入自定义组件
  18. import NavCustom from '@/components/nav-custom.vue'
  19. Vue.component('nav-custom',NavCustom)
  20.  
  21. import HomeTitle from '@/components/home-title.vue'
  22. Vue.component('home-title',HomeTitle)
  23.  
  24. import GoodItem from '@/components/goods-item.vue'
  25. Vue.component('good-item',GoodItem)
  26.  
  27. import TabCustom from '@/components/tab-custom.vue'
  28. Vue.component('tab-custom',TabCustom)
  29.  
  30. // 挂载全局异步请求方法(单个挂载)
  31. /* import {$http,$get,$post,$put} from '@/utils/request.js'
  32. Vue.prototype.$http = $http
  33. Vue.prototype.$get = $get
  34. Vue.prototype.$post = $post
  35. Vue.prototype.$put = $put */
  36.  
  37. // 挂载全局异步请求方法(批量挂载request.js里面的所有方法)
  38. import * as request from '@/utils/request.js'
  39. for (let key in request) {
  40.     Vue.prototype[key] = request[key]
  41. }
  42.  
  43.  
  44. app.$mount()
  45. // #endif
  46.  
  47. // #ifdef VUE3
  48. import { createSSRApp } from 'vue'
  49. import { from } from 'form-data'
  50. export function createApp() {
  51.   const app = createSSRApp(App)
  52.   return {
  53.     app
  54.   }
  55. }
  56. // #endif

tab-custom.vue

  1. <template>
  2.     <view>
  3.         <view class="fixed flex justify-center bg-fff padding-sm">
  4.             <view v-for="(item,index) in tabArr" :key="index" @tap="handleTab(item)"
  5.                 class="flex justify-around align-center">
  6.                 <view class="">{{item.name}}</view>
  7.                 <u-line v-if="index<tabArr.length-1" direction="col" length="15" margin="30upx"></u-line>
  8.             </view>
  9.         </view>
  10.         <u-popup :show="show" mode="left" @close="handleClose">
  11.             <view class="pop-cont">
  12.                 <view v-for="(item,index) in cfylist">
  13.                     <view @click="handleList(item,0)" class="padding-sm u-border-bottom">
  14.                         {{item.bname}}
  15.                         <view class="cu-tag round bg-yellow color-fff margin-sm">
  16.                             {{item.num}}
  17.                         </view>
  18.                     </view>
  19.                     <view v-if="index==0">
  20.                         <view 
  21.                             @tap="listShow=!listShow"
  22.                             :class="['padding-sm',{'u-border-bottom':!listShow}]"
  23.                         >
  24.                             口味筛选
  25.                         </view>
  26.                         <u-cell-group v-if="listShow">
  27.                             <u-cell 
  28.                                 v-for="(itm,idx) in item.list" 
  29.                                 :title="itm.tname" 
  30.                                 isLink
  31.                                 @click="handleList(itm,1)" 
  32.                             ></u-cell>
  33.                         </u-cell-group>
  34.                         <view 
  35.                             @tap="sceneShow=!sceneShow" 
  36.                             :class="['padding-sm',{'u-border-bottom':!sceneShow}]">
  37.                             场景筛选
  38.                         </view>
  39.                         <u-cell-group v-if="sceneShow">
  40.                             <u-cell 
  41.                                 v-for="(itm,idx) in item.scene" 
  42.                                 :title="itm.tname" 
  43.                                 isLink                            
  44.                                 @click="handleList(itm,2)" 
  45.                             ></u-cell>
  46.                         </u-cell-group>
  47.                     </view>
  48.                 </view>
  49.             </view>
  50.         </u-popup>
  51.     
  52.     </view>
  53. </template>
  54.  
  55. <script>
  56.     export default {
  57.         name:"tab-custom",
  58.         data() {
  59.             return {
  60.                 tabArr: [{
  61.                         name: '分类',
  62.                         bcid: '',
  63.                         target: ''
  64.                     },
  65.                     {
  66.                         name: '蛋糕',
  67.                         bcid: '1',
  68.                         target: '/pages/cake/cake'
  69.                     },
  70.                     {
  71.                         name: '面包',
  72.                         bcid: '11',
  73.                         target: '/pages/cake/cake'
  74.                     },
  75.                     {
  76.                         name: '小食',
  77.                         bcid: '6',
  78.                         target: '/pages/cake/cake'
  79.                     },
  80.                     {
  81.                         name: '购物车',
  82.                         bcid: '',
  83.                         target: '/pages/cart/cart'
  84.                     }
  85.                 ],
  86.                 show: false,
  87.                 cfylist:[],
  88.                 listShow:false,
  89.                 sceneShow:false
  90.             };
  91.         },
  92.         created() {
  93.             this.$get('/1.1/classes/classify').then(res=>{
  94.                 console.log(res)
  95.                 this.cfylist = res.results
  96.             })
  97.         },
  98.         methods: {
  99.             handleTab(item) {
  100.                 
  101.                 let {
  102.                     bcid,
  103.                     target
  104.                 } = item
  105.                 if (bcid) { // 商品列表数据更新
  106.                     // this.glist = []
  107.                     // this.page = 0
  108.                     // this.condition.bcid = Number(bcid)
  109.                     this.$store.commit('changeCondition',{
  110.                         bcid:Number(bcid)
  111.                     })
  112.                     uni.navigateTo({
  113.                         url:target
  114.                     })
  115.                 }
  116.                 if (!bcid && !target) { // 侧边分类
  117.                     this.show = true
  118.                 }
  119.                 if (!bcid && target) {
  120.                     uni.navigateTo({
  121.                         url:target
  122.                     })
  123.                 }
  124.             },
  125.             handleClose(){
  126.                 this.show = false
  127.             },
  128.             handleList({bid,tid},type){
  129.                 let obj = {bcid:bid}
  130.                 // type === 1 ? obj.fid=tid : obj.sid=tid
  131.                 if(type===1){obj.fid=tid}
  132.                 if(type===2){obj.sid=tid}
  133.                 this.$store.commit('changeCondition',obj)
  134.                 this.show = false
  135.                 uni.navigateTo({
  136.                     url:'/pages/cake/cake'
  137.                 })
  138.             }
  139.             
  140.         },
  141.     }
  142. </script>
  143.  
  144. <style lang="scss">
  145.  
  146. .fixed {
  147.     position: fixed;
  148.     bottom: 0;
  149.     left: 0;
  150.     width: 100%;
  151.     box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
  152. }
  153. .pop-cont{
  154.     width: 400upx;
  155.     margin-top: 200upx;
  156. }
  157. </style>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/116994
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号