一、新建页面
二、在pages.json中配置tabbar中的list属性
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"iconPath": "static/tab-icons/hot.png",
"selectedIconPath": "static/tab-icons/hot-active.png",
"text": "首页",
"iconfont": {
"text": "\ue102",
"selectedText": "\ue103",
"fontSize": "17px",
"color": "#000000",
"selectedColor": "#0000ff"
}
}, {
"pagePath": "pages/video/video",
"iconPath": "static/tab-icons/hot-video.png",
"selectedIconPath": "static/tab-icons/hot-video-active.png",
"text": "热播",
"iconfont": {
"text": "\ue102",
"selectedText": "\ue103",
"fontSize": "17px",
"color": "#000000",
"selectedColor": "#0000ff"
}
},{
"pagePath": "pages/my/my",
"iconPath": "static/tab-icons/my.png",
"selectedIconPath": "static/tab-icons/my-active.png",
"text": "我的",
"iconfont": {
"text": "\ue102",
"selectedText": "\ue103",
"fontSize": "17px",
"color": "#000000",
"selectedColor": "#0000ff"
}
}]
}
三、分析 .vue 文件
- template：定义当前页面的结构。相当于 wxml
- script：定义当前页面的逻辑。相当于 js
- style：定义当前页面的样式。相当于 wxss
// scoped属性 表示当前样式只在当前页面生效
<style lang="scss" scoped>
.bannerIcon {
width: 755rpx;
height: 40px;
}
</style>
四、创建自定义组件
- 在项目根目录新建文件，命名 components
- 右键 components 文件，选择新建组件
- 在需要使用组件的页面直接使用，无需注册或其他额外操作。
- 父组件向子组件传值
子组件内，通过props属性声明接收的变量名和变量类型
<script>
export default {
name:"my_search",
props : {
placeHolderText : {
type:String,
default:"imdefault"
}
},
data() {
return {
};
}
}
</script>
父组件内，创建组件时给对应的 placeHolderText 属性赋值
<my_search placeHolderText="我说要有光"></my_search>
