uniapp(二)

一，如果写了样式，获取写了结构，微信小程序没有效果，那么需要删除打包的文件，微信小程序有缓存

二，点击导航栏，active类动态展示，通过自定义索引实现逻辑

    <scroll-view scroll-x="true" class="navScroll" enable-flex="true" v-if="indexData.kingKongModule">
            <view class="navItem" 
            :class="currentIndex===-1?'active':''"
            @click="changeNavIndex(-1)"
            >推荐</view>
            <view class="navItem" 
            v-for="(item,index) in indexData.kingKongModule.kingKongList"
            :key="item.L1Id"
            :class="currentIndex===index?'active':''"
            @click="changeNavIndex(index)"
            >{{item.text}}</view>
        </scroll-view>

    data() {
            return {
                // indexData:{},
                currentIndex:-1
            }
        },

methods:{
            changeNavIndex(navIndex){
                this.currentIndex=navIndex;

三，首页模块（抽取组件，自定义模板）

3.1，项目中创建compoents文件夹---》recommend文件夹->recommend.vue

index.vue是父组件， recommend.vue是子组件

3.2，在父组件中引入子组件，注意是要相对路径，否则报错

    import Recommend from '../../components/recommend/recommend.vue';

注册

    components:{
            Recommend
        },

<scroll-view scroll-x="true" class="navScroll" enable-flex="true" v-if="indexData.kingKongModule">
            <view class="navItem" 
            :class="currentIndex===-1?'active':''"
            @click="changeNavIndex(-1)"
            >推荐</view>
            <view class="navItem" 
            v-for="(item,index) in indexData.kingKongModule.kingKongList"
            :key="item.L1Id"
            :class="currentIndex===index?'active':''"
            @click="changeNavIndex(index)"
            >{{item.text}}</view>
        </scroll-view>
        
        <Recommend />

可对vue文件自定义模板

四，在recommend组件中设置轮播图静态页面

<template>
    <div class="recommendContainer">
        <swiper class="bannerSwiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
            <swiper-item class="bannerItem">
                <image class="bannerImg" src="https://yanxuan.nosdn.127.net/c33662e673045cf8488de48a8a44719f.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
            </swiper-item>
            <swiper-item class="bannerItem">
                <image class="bannerImg" src="https://yanxuan.nosdn.127.net/77ff665c81b2c6cf320615cab87ce6eb.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
            </swiper-item>
            <swiper-item class="bannerItem">
                <image class="bannerImg" src="https://yanxuan.nosdn.127.net/72440d65cbb26a337dbf84233d97e23b.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image>
            </swiper-item>
        </swiper>

五，首页模块（vuex的使用）

5.1，安装vuex,npm  i vuex,  在项目中新建store文件夹，新建index,js, 在store中新建modules文件夹，新建home.js,建立子状态管理模块

在index.js引入子模块，

import Vue from "vue";
import Vuex from "vuex";
import home from "./modules/home.js";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    home,
  },
});

home.js, vuex的四大天王

只能传入一个参数，如果是一个数据，就这样，如果是多个数据，必须是一个对象传入
test3(store,data){
        // console.log('store',store);
        // console.log('data',data)
        store.state.initData=data.initData
    }

使用常量替代 Mutation 事件类型

用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做

新建mutation-type.js文件，分别暴露

export const SETINDEXDATA="setindexdata";

import {SETINDEXDATA} from '../mutation-types.js';
import request from '../../utils/request.js'
const state={
    initData:"我是初始数据",
    indexData:{}
}

const mutations={
    // test(state,data){
    //     console.log('test1')
    //     setTimeout(()=>{
    //         state.initData="我是修改之后数据"
    //     },2000)
    // },
    // test2(state){
    //     console.log('test2')
    //     state.initData="我是修改之后数据2"
    // }
    // [TEST](state){
    //     console.log("我是甲程序猿创建的test")
    // },
    [SETINDEXDATA](state,indexData){
        state.indexData=indexData
    }
}

const actions={
可以在actions修改数据，一般不这样做，在mutations中修改
    // test3(store,data){
    //     // console.log('store',store);
    //     // console.log('data',data)
    //     store.state.initData=data.initData
    // }
    async getIndexData({commit}){
        let result = await request('/getIndexData');
        if(!result){
            console.log('请求失败')
            //可以防止初始值,提前准备体量较小的数据,保证页面展示
            result=["推荐","居家生活","服饰鞋包"];
        }
        commit(SETINDEXDATA,result)
    }
}

const getters={
    
}

export default {
    state,
    mutations,
    actions,
    getters
}

记得在main.js中引入index,js

import Vue from 'vue'
import App from './App'

import store from './store/index.js';

//关闭Vue代码警告提示
Vue.config.productionTip = false

//mp->mini program   type->类型    ->App组件代表整个小程序
App.mpType = 'app'

const app = new Vue({
    ...App,
    store
})
app.$mount()

六，在recommend中新建category的组件

6.1，新建category组件，然后在recommend中引入，注册

    import Categorys from '../categorys/categorys.vue';

    components:{
            Categorys
        }

    <Categorys v-for="categoryObj in indexData.categoryModule" :categoryObj="categoryObj" :key="categoryObj.titlePicUrl"/>

利用props将数据传给子组件，然后数据渲染

props:["categoryObj"]

<template>
    <div class="categorysContainer">
        <image class="bigBanner" :src="categoryObj.titlePicUrl" mode=""></image>
        <scroll-view class="categoryList" scroll-x="true" >
            <view class="categoryItem" v-for="category in categoryObj.itemList" :key="category.id">
                <image class="common" :src="category.showPicUrl" mode=""></image>
                <text>{{category.name}}</text>
            </view>
            <view class="categoryItem common more">查看更多></view>
        </scroll-view>
    </div>
</template>

分类模块配置，tabbar页面

在page.json中配置tabbar页， 然后在page文件夹新建category, cart, personal页面，

    "tabBar":{
        "color":"#555",
        "selectedColor":"#D43C33",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath":"/static/images/tabBar/tab-home.png",
                "selectedIconPath": "/static/images/tabBar/tab-home-current.png"
            },
            {
                "pagePath": "pages/category/category",
                "text": "分类",
                "iconPath":"/static/images/tabBar/tab-cate.png",
                "selectedIconPath": "/static/images/tabBar/tab-cate-current.png"
            },
            {
                "pagePath": "pages/cart/cart",
                "text": "购物车",
                "iconPath":"/static/images/tabBar/tab-cart.png",
                "selectedIconPath": "/static/images/tabBar/tab-cart-current.png"
            },
            {
                "pagePath": "pages/personal/personal",
                "text": "个人中心",
                "iconPath":"/static/images/tabBar/tab-my.png",
                "selectedIconPath": "/static/images/tabBar/tab-my-current.png"
            }
        ]
        
    }

然后在page.json中pages属性中配置路径

    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/category/category",
            "style": {
                "navigationBarTitleText": "分类"
            }
        },{
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },{
            "path": "pages/cart/cart",
            "style": {
                "navigationBarTitleText": "购物车"
            }
        },{
            "path": "pages/personal/personal",
            "style": {
                "navigationBarTitleText": "个人中心"
            }
        }
    ],

分类模块，scroll-view问题，

问题；scroll-view,设置 scroll-y="true" 属性，如果顶部有个搜索栏，让页面竖直滑动，那么滑动的是整个页面（包括顶部的搜索栏，调用的是系统滚动条），

我们需要给scroll-view计算高度，height: cacl(100vh - 82upx), 82upx是整个搜索框的高度，页面底部的tabbar不用计算，cacl还有四舍五入，需要注意

<div class="a">
        <view class="b">
            <view  class="c">搜索商品</view>
            
        </view>
        
        <view class="content">
            <!-- 左边 -->
            <view class="left">
                <scroll-view class="d"  scroll-y="true" >
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                    <view class="e">居家生活</view>
                </scroll-view>
                
            </view>

css

.a
        .b
            height 60upx
            padding 10upx 20upx
            // margin 10upx 20upx
            border-bottom 2upx solid
            
            
            .c
                height 60upx
                width 100%
                text-align center
                border-radius 15upx
                line-height 60upx
                background-color #eee
        .content
            height calc(100vh - 82upx)
            
            .left
                height 100%
                .d
                    height 100%
                    .e
                        width 148upx
                        height 80upx
                        font-size 26upx

在服务器中配置路由，发送响应数据

    
// 用于分类页面的数据请求
const categoryDatas= require('./datas/categoryDatas.json');
router.get('/getCategoryDatas',function(ctx,next){
    // console.log('/test');
    //返回数据
    ctx.body=categoryDatas
})
    

发送请求，获取数据

        async mounted(){
            let result = await request('/getCategoryDatas');
            console.log(result)
            this.categoryDatas=result;
            this.currentId=result[0].id;
        },

点击左边的商品标签，通过自定义变量currentId控制active类

    <view class="leftContainer">
                <scroll-view class="navScroll" scroll-y="true" >
                    <view class="navItem" :class="currentId===category.id?'active':''" @click="changeNavId(category.id)" v-for="category in categoryDatas" :key="category.id">{{category.name}}</view>
                </scroll-view>
            </view>

    methods:{
            changeNavId(id){
                this.currentId=id;
                console.log(this.currentId,id)
            }
        },

    data(){
            return {
                categoryDatas:[],
                currentId:null
            }
        },

点击左边的标签，通过id,找到与之对应的数据

        computed:{
            cateList(){
                //find filter evey some
                //find        返回值是第一个符合条件的对象
                //filter    返回值是数组
                let result=this.categoryDatas.find((item,index)=>item.id===this.currentId);
                console.log(result)
                return result;
            }
        }

填充数据

            <view class="rightContainer">
                <scroll-view scroll-y="true" class="contentScroll">
                    <view class="scrollHeader">
                        <image class="headerImg" :src="cateList.imgUrl" mode=""></image>
                    </view>
                    <view class="contentItem" v-for="item in cateList.subCateList" :key="item.id">
                        <image :src="item.wapBannerUrl" mode=""></image>
                        <text>{{item.name}}</text>
                    </view>
                </scroll-view>
            </view>