课堂学习：删除及切换事件 tabBar导航栏 跳转页面
一、wx:if 与 hidden：
<!-- wx:if用于条件渲染：条件为真生成里面的内容，条件为假不会生成里面的内容。（每次重新生成内容）
hidden用于条件渲染：条件为真隐藏里面的内容，条件为假显示里面的内容。（每次切换样式-->
<view class="songs" wx:if="{{typeId==1}}">
二、切换分类：this.data({}) 用于重新渲染页面
changeType(e){
//获取到事件源对象身上绑定的三个属性
let {currentTarget:{dataset:{typeid,typename,typehot}}} = e
//更新页面数据
this.setData({
//重新设置分类编号
typeId:typeid,
name:typename,
hot:typehot
})
},
三、跳转页面的方法：通过组件跳转及通过事件跳转
1.组件跳转：
navigator组件，就相当于网页中的超链接
<!-- 跳转到普通页，可以通过返回按钮返回 -->
<navigator url="../detail/detail">到详情页</navigator>
<!-- 跳转到tabBar页面，需要加上open-type="switchTab"，不可以通过返回按钮返回，因为跳转到指定的tabBar页面后，会关闭其他所有页面 -->
<navigator url="../list/list" open-type="switchTab">到列表页</navigator>
2.事件跳转：
//跳转到详情页
gotoDetail(){
//使用全局api跳转，navigateTo()方法，用于跳转普通页面
wx.navigateTo({url: '../detail/detail'})
},
//跳转到列表页
gotoList(){
// switchTab()方法，用于跳转tabBar页面
wx.switchTab({url: '../list/list'})
}
四、确认框和消息框：更多参数请访问：https://developers.weixin.qq.com/miniprogram/dev/framework/ 查看
wx:showModal()方法,打开确认框:
wx:showModal({
content:'输入提示内容'，
success:()=>{} //回调函数 里面有三个参数 content confirm cancel
当confirm为true时 为用户点击了确定
当cancel为true时 为用户点击了取消
})
wx:showToast()方法,打开消息框:
wx.showToast({
title: '删除成功', //消息框标题
icon:"success", //消息框图标
duration:1500, //提示延迟时间
mask:true //是否显示透明蒙层，防止触摸穿透
})
五、tabBar导航栏 写在json里面 页面中json文件里导航栏样式会覆盖全局的样式
"tabBar": {
"color": "#000000", //tab 上的文字默认颜色，仅支持十六进制颜色
"selectedColor": "#336699", //文字选中时的颜色，仅支持十六进制颜色
"backgroundColor": "#ffffff", //背景色，仅支持十六进制颜色
"borderStyle": "black", //tabbar 上边框的颜色， 仅支持 black / white
"list": [ //tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
"text": "首页", //tab的名字
"pagePath": "pages/index/index", //页面的路径
"iconPath": "assets/icon/home.png", //页面的图标路径
"selectedIconPath": "assets/icon/home2.png" //选中后的图标路径
]
}
