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

川长思鸟来 2024-04-07 15:40 76阅读 0赞

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

![1b9bd00676ce4e45b8a9f9d96d6d5a03.png][]

homee.vue

<template>
        <scroll-view class="scroll-cont" :scroll-into-view="topItem" @scroll="handleScroll" scroll-y="true" scroll-with-animation="true">
            <view>
                <view id="top"></view>
                
                <nav-custom></nav-custom>
                
                <swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                    <swiper-item v-for="(item,index) in banner" :key="item.objectId">
                        <image :src="item.img" @tap="handleBanner(item.link)"></image>
                    </swiper-item>
                </swiper>
                <home-title
                    title="本季推荐" 
                    en-title="Seasonal Recommend" 
                    en-tit="Seasonal" 
                ></home-title>
                <scroll-view scroll-x="true" >
                    <view class="scroll-inner">
                        <image src="../../static/logo.png" mode="heightFix"></image>
                        <image src="../../static/logo1.png" mode="heightFix"></image>
                        <image src="../../static/logo.png" mode="heightFix"></image>
                        <image src="../../static/logo1.png" mode="heightFix"></image>
                    </view>
                </scroll-view>
                
                <home-title
                    title="法式经典" 
                    en-title="French Classic" 
                    en-tit="French" 
                ></home-title>
                <image class="classify" src="../../static/logo.png" mode=""></image>
                
                <view class="flex flex-wrap padding-sm justify-between">
                    <good-item v-for="(item,index) in 4"></good-item>
                </view>
                
                <view class="back-top" v-if="isShowGoTop" @tap="handleBackTop">
                    <text class="iconfont icon-huidingbu"></text>
                </view>
            </view>
            <tab-custom></tab-custom>
        </scroll-view>
    </template>
    
    <script>
        // 局部引入封装的 promise $http
        import {$http} from '@/utils/request.js'
        export default {
            data() {
                return {
                    isShowGoTop:false,
                    topItem:'', //返回顶部的标记点
                    banner:[]
                }
            },
            methods: {
                handleScroll(ev){
                    // console.log(ev.detail);
                    let {scrollTop} = ev.detail
                    this.isShowGoTop = scrollTop >600
                    this.topItem = '' //重置定位返回点
                },
                handleBackTop(){
                    this.topItem = 'top'
                },
                handleBanner(link){
                    uni.navigateTo({
                        url:`banner-ad?link=${link}`
                    })
                }
            },
            onLoad() {
                // 方法三 使用全局封装的 $get方法
                this.$get('/1.1/classes/banner').then(res=>{
                    this.banner = res.results //取回数据并指定到swiper
                })
                
            }
        }
    </script>
    
    <style lang="scss">
    .back-top{
        height: 100upx;
        width: 100upx;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 0 10upx 4upx rgba(0, 0, 0, 0.4);
        position: fixed;
        bottom: 40upx;
        right: 20upx;
        text-align: center;
        line-height: 100upx;
    }
    .classify{
        height: 380upx;
        width: 100%;
    }
    .scroll-inner{
        white-space: nowrap;
        image{
            height: 290upx;
            width: auto;
        }
    }
    
    .banner{
        height: 1000upx;
        swiper-item{
            height: 1000upx;
        }
        image{
            width: 100%;
            height:1000upx
        }
    }
    .scroll-cont{
        height: 100vh;
    }
    </style>

main.js

import App from './App'
    import store from 'store/index.js' //引入自定义的store
    
    // #ifndef VUE3
    import Vue from 'vue'
    Vue.config.productionTip = false
    App.mpType = 'app'
    const app = new Vue({
        ...App,
        store  //注入状态机
    })
    
    // 全局引入uView主JS库
    import uView from '@/uni_modules/uview-ui'
    Vue.use(uView)
    
    // 全局引入自定义组件
    import NavCustom from '@/components/nav-custom.vue'
    Vue.component('nav-custom',NavCustom)
    
    import HomeTitle from '@/components/home-title.vue'
    Vue.component('home-title',HomeTitle)
    
    import GoodItem from '@/components/goods-item.vue'
    Vue.component('good-item',GoodItem)
    
    import TabCustom from '@/components/tab-custom.vue'
    Vue.component('tab-custom',TabCustom)
    
    // 挂载全局异步请求方法(单个挂载)
    /* import {$http,$get,$post,$put} from '@/utils/request.js'
    Vue.prototype.$http = $http
    Vue.prototype.$get = $get
    Vue.prototype.$post = $post
    Vue.prototype.$put = $put */
    
    // 挂载全局异步请求方法(批量挂载request.js里面的所有方法)
    import * as request from '@/utils/request.js'
    for (let key in request) {
        Vue.prototype[key] = request[key]
    }
    
    
    app.$mount()
    // #endif
    
    // #ifdef VUE3
    import { createSSRApp } from 'vue'
    import { from } from 'form-data'
    export function createApp() {
      const app = createSSRApp(App)
      return {
        app
      }
    }
    // #endif

tab-custom.vue

<template>
        <view>
            <view class="fixed flex justify-center bg-fff padding-sm">
                <view v-for="(item,index) in tabArr" :key="index" @tap="handleTab(item)"
                    class="flex justify-around align-center">
                    <view class="">{
       {item.name}}</view>
                    <u-line v-if="index<tabArr.length-1" direction="col" length="15" margin="30upx"></u-line>
                </view>
            </view>
            <u-popup :show="show" mode="left" @close="handleClose">
                <view class="pop-cont">
                    <view v-for="(item,index) in cfylist">
                        <view @click="handleList(item,0)" class="padding-sm u-border-bottom">
                            {
       {item.bname}}
                            <view class="cu-tag round bg-yellow color-fff margin-sm">
                                {
       {item.num}}
                            </view>
                        </view>
                        <view v-if="index==0">
                            <view 
                                @tap="listShow=!listShow"
                                :class="['padding-sm',{'u-border-bottom':!listShow}]"
                            >
                                口味筛选
                            </view>
                            <u-cell-group v-if="listShow">
                                <u-cell 
                                    v-for="(itm,idx) in item.list" 
                                    :title="itm.tname" 
                                    isLink
                                    @click="handleList(itm,1)" 
                                ></u-cell>
                            </u-cell-group>
                            <view 
                                @tap="sceneShow=!sceneShow" 
                                :class="['padding-sm',{'u-border-bottom':!sceneShow}]">
                                场景筛选
                            </view>
                            <u-cell-group v-if="sceneShow">
                                <u-cell 
                                    v-for="(itm,idx) in item.scene" 
                                    :title="itm.tname" 
                                    isLink                            
                                    @click="handleList(itm,2)" 
                                ></u-cell>
                            </u-cell-group>
                        </view>
                    </view>
                </view>
            </u-popup>
        
        </view>
    </template>
    
    <script>
        export default {
            name:"tab-custom",
            data() {
                return {
                    tabArr: [{
                            name: '分类',
                            bcid: '',
                            target: ''
                        },
                        {
                            name: '蛋糕',
                            bcid: '1',
                            target: '/pages/cake/cake'
                        },
                        {
                            name: '面包',
                            bcid: '11',
                            target: '/pages/cake/cake'
                        },
                        {
                            name: '小食',
                            bcid: '6',
                            target: '/pages/cake/cake'
                        },
                        {
                            name: '购物车',
                            bcid: '',
                            target: '/pages/cart/cart'
                        }
                    ],
                    show: false,
                    cfylist:[],
                    listShow:false,
                    sceneShow:false
                };
            },
            created() {
                this.$get('/1.1/classes/classify').then(res=>{
                    console.log(res)
                    this.cfylist = res.results
                })
            },
            methods: {
                handleTab(item) {
                    
                    let {
                        bcid,
                        target
                    } = item
                    if (bcid) { // 商品列表数据更新
                        // this.glist = []
                        // this.page = 0
                        // this.condition.bcid = Number(bcid)
                        this.$store.commit('changeCondition',{
                            bcid:Number(bcid)
                        })
                        uni.navigateTo({
                            url:target
                        })
                    }
                    if (!bcid && !target) { // 侧边分类
                        this.show = true
                    }
                    if (!bcid && target) {
                        uni.navigateTo({
                            url:target
                        })
                    }
                },
                handleClose(){
                    this.show = false
                },
                handleList({bid,tid},type){
                    let obj = {bcid:bid}
                    // type === 1 ? obj.fid=tid : obj.sid=tid
                    if(type===1){obj.fid=tid}
                    if(type===2){obj.sid=tid}
                    this.$store.commit('changeCondition',obj)
                    this.show = false
                    uni.navigateTo({
                        url:'/pages/cake/cake'
                    })
                }
                
            },
        }
    </script>
    
    <style lang="scss">
    
    .fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
    }
    .pop-cont{
        width: 400upx;
        margin-top: 200upx;
    }
    </style>

[1b9bd00676ce4e45b8a9f9d96d6d5a03.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d084153cefb84b359db1934ec7a279c5.png