(pages/index/index)
<template>
<!-- 模板里只能写uni-app自己提供的组件 -->
<view class="content">
<swiper class="swiper" :indicator-dots="true" indicator-color="#eee" indicator-active-color="#f07c82" :autoplay="true" circular="false" :interval="3000" :duration="1000">
<swiper-item>
<image class="img" src="http://p1.music.126.net/xNtAAaRXa2AzPcMDJ2zCcA==/109951167377414629.jpg?imageView&quality=89"></image>
</swiper-item>
<swiper-item>
<image class="img" src="http://p1.music.126.net/GB9puNTOuUxOiiHUUG-bqA==/109951167380076547.jpg?imageView&quality=89"></image>
</swiper-item>
<swiper-item>
<image class="img" src="http://p1.music.126.net/RjHRPCCrxbudCRvqM3Jyeg==/109951167377425712.jpg?imageView&quality=89"></image>
</swiper-item>
</swiper>
<!-- 分类 -->
<view class="types">
<view class="item" :class="{active:activeIndex===index}"
@click="activeIndex=index" v-for="(item,index) in types" :key="item.id">{{item.name}}</view>
</view>
<!-- 流行歌曲条件渲染 -->
<view class="songs" v-if="activeIndex===0">
<!-- 隔行变色 -->
<view :class="{bg:index%2===0}" class="item" v-for="(item,index) in popularSongs">
<text>{{item.id}}--{{item.name}}</text>
<view class="btn" @click="delPopular(index)">删除</view>
</view>
</view>
<!-- 网络歌曲条件渲染 -->
<view class="songs" v-if="activeIndex===1">
<view :class="{bg:index%2===0}" class="item" v-for="(item,index) in networkSongs">
<text>{{item.id}}--{{item.name}}</text>
<view class="btn" @click="delNetwork(index)">删除</view>
</view>
</view>
</view>
</template>
<script>
import {$msg,$confirm} from '../../utils/msg.js'
//js这里的语法是vue没有太多区别
export default {
//定义属性
data() {
return {
//分类高亮索引
activeIndex:0,
//分类数组
types:[
{
id:1,
name:'流行歌曲'
},
{
id:2,
name:'网络歌曲'
},
{
id:3,
name:'英语歌曲'
},
],
//流行歌曲数组
popularSongs:[{
id:1,
name:'江南'
},
{
id:2,
name:'小酒窝'
},],
//网络歌曲数组
networkSongs:[{
id:1,
name:'素颜'
},
{
id:2,
name:'绅士'
}],
}
},
//定义方法
methods: {
//删除流行歌曲
async delPopular(index){
//确认框
await $confirm("确认删除吗")
this.popularSongs.splice(index,1)
$msg('删除成功')
}
},
//页面的生命周期函数(同小程序一样)
//监听页面加载
onLoad() {
// console.log('页面加载完成');
},
//监听页面显示
onShow() {
// console.log('页面显示完成');
},
//监听页面初次渲染完成
onReady() {
// console.log('页面初次渲染完成');
},
//监听页面隐藏
onHide() {
// console.log('页面隐藏');
},
//监听页面卸载
onUnload() {
// console.log('页面卸载');
},
//组件的生命周期函数（同vue一样）
beforeCreate(){
// console.log('组件创建之前，此时还不能使用数据');
},
created(){
// console.log('组件创建完成，此时可以操作数据');
},
beforeMount(){
// console.log('页面挂载之前，此时还不能手动操作dom');
},
mounted(){
// console.log('页面挂载完成，此时可以手动操作dom');
},
beforeUpdate(){
// console.log('数据更新完成，页面重新挂载之前');
},
updated(){
// console.log('数据更新完成，页面重新挂载完成');
},
beforeDestroy(){
// console.log('组件销毁之前');
},
destroyed(){
// console.log('组件销毁完成');
}
}
</script>
<style lang="scss">
.content {
//轮播图样式
.swiper{
height: calc(100vw/1080*420);
.img{
width: 100vw;
height: calc(100vw/1080*420);
}
}
}
//分类样式
.types{
display: flex;
justify-content: space-between;
.item{
width: 180rpx;
height: 160rpx;
background-color: $bg-color2;
color: $font_color2;
font-size: 28rpx;
line-height: 160rpx;
text-align: center;
&.active{
background-color: $bg-color1;
color: $font_color1;
}
}
}
.songs{
padding: 10rpx;
font-size: 28rpx;
.item{
padding: 10rpx 0;
display: flex;
justify-content: space-between;
background-color: #eee;
&.bg{
background-color: #f08990;
}
.btn{
width: 100rpx;
height: 40rpx;
border: 1px solid #ccc;
text-align: center;
line-height: 40rpx;
border-radius: 10rpx;
}
}
}
</style>
(utils/msg)
//消息框方法
export let $msg=(title,icon="success",duration=1000)=>{
//提示
uni.showToast({
title,
icon,
mask:true,
duration,
})
}
//确认框
export let $confirm=(content)=>{
return new Promise((resolve,reject)=>{
//确认框
uni.showModal({
content:"确认删除吗",
success:({confirm})=>{
if(confirm){
resolve()
}
}
})
})
}
(app.vue)
<script>
export default {
//项目生命周期
//初始化完成时触发（全局只触发一次）
onLaunch: function() {
// console.log('App Launch')
},
//每次启动应用时触发，从后台进入前台显示时触发
onShow: function() {
// console.log('App Show')
},
//每次隐藏应用时触发，从前台进入后台时触发
onHide: function() {
// console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
*{
margin: 0;
padding: 0;
}
.flex{
display: flex;
}
.j-s{
justify-content: space-between;
}
.j-c{
justify-content: center;
}
.a-c{
align-items: center;
}
</style>
(pages.json)
//页面配置 相当于路由
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
//配置所有页面信息
{
"path": "pages/index/index",
"style": {
//单独设置页面的顶部导航栏标题，没有设置 采用全局设置
"navigationBarTitleText": "首页"
}
}
,{
"path" : "pages/list/list",
"style" :
{
"navigationBarTitleText": "列表"
}
}
,{
"path" : "pages/order/order",
"style" :
{
"navigationBarTitleText": "订单"
}
}
,{
"path" : "pages/mine/mine",
"style" :
{
"navigationBarTitleText": "我的"
}
}
],
//配置全局外观
"globalStyle": {
//顶部导航栏标题颜色
"navigationBarTextStyle": "white",
//顶部导航栏标题内容
"navigationBarTitleText": "my-app",
//顶部导航栏背景颜色
"navigationBarBackgroundColor": "#f07c82",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#cccccc",
"selectedColor": "#f07c82",
"list": [
{
"pagePath": "./pages/index/index",
"iconPath": "",
"selectedIconPath": "",
"text": "首页"
},
{
"pagePath": "./pages/list/list",
"iconPath": "",
"selectedIconPath": "",
"text": "列表"
},
{
"pagePath": "./pages/order/order",
"iconPath": "",
"selectedIconPath": "",
"text": "订单"
},
{
"pagePath": "./pages/mine/mine",
"iconPath": "",
"selectedIconPath": "",
"text": "我的"
}
]
}
}
(uni.sass)
//全局主题样式
//背景颜色
$bg_color1:#f07c82;
$bg_color2:#eeeeee;
//文字颜色
$font_color1:#ffffff;
$font_color2:#000000;
