uni-app知识点2

一、路由跳转的时候传值

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

// 在test.vue页面接受参数
export default {
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}

二、list列表点击过的一个颜色，当前被点击的list是另一个颜色

知识点：动态样式的运用

<view class="list" v-for="(item,index) in list" :key="item.id" @click="toDetail(index)"
    :class="[isReadArr.indexOf(index) == -1 ? 'default-list' :'read-list',currentPage == index ? 'current-page':'']"
    >
</view>

export default {
    components: {},
    data() {
        return {
            currentPage : -1,
            isReadArr:[],
        }
    },
    toDetail(index) {
        if (this.isReadArr.indexOf(index) == -1) {
            //把点击过的list的下标存放到一个数组中
            this.isReadArr.push(index)
        }
        this.currentPage = index;	
    }
}

<style>
	.read-list {
		color: purple;
	}
    .current-page {
        color: #74a4f4;
	}
</style>

思路：先定义一个数组isReadArr[],让他存放我已经点击过的list的下标，然后在动态样式里去判断，如果在这个数组里有这个下标，就是点击过的颜色，如果没有就是默认颜色

三、设置app顶部导航标题

uni.setNavigationBarTitle({
    title: '新的标题'
});

设置导航条的颜色、动画、隐藏返回首页按钮，顶部导航的一些处理……
https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitle

四、修改input里面的字号placeholder

<input type="text" placeholder="搜索标题或关键字" placeholder-style="font-size:28rpx">