(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>
<!-- 網(wǎng)絡(luò)歌曲條件渲染 -->
<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這里的語(yǔ)法是vue沒有太多區(qū)別
export default {
//定義屬性
data() {
return {
//分類高亮索引
activeIndex:0,
//分類數(shù)組
types:[
{
? id:1,
? name:'流行歌曲'
? ? },
{
? id:2,
? name:'網(wǎng)絡(luò)歌曲'
},
{
? id:3,
? name:'英語(yǔ)歌曲'
},
],
//流行歌曲數(shù)組
popularSongs:[{
? id:1,
? name:'江南'
? ? },
{
? id:2,
? name:'小酒窩'
},],
//網(wǎng)絡(luò)歌曲數(shù)組
networkSongs:[{
? id:1,
? name:'素顏'
? ? },
{
? id:2,
? name:'紳士'
}],
}
},
//定義方法
methods: {
//刪除流行歌曲
async delPopular(index){
//確認(rèn)框
await $confirm("確認(rèn)刪除嗎")
this.popularSongs.splice(index,1)
$msg('刪除成功')
}
},
//頁(yè)面的生命周期函數(shù)(同小程序一樣)
//監(jiān)聽頁(yè)面加載
onLoad() {
// console.log('頁(yè)面加載完成');
},
//監(jiān)聽頁(yè)面顯示
onShow() {
// console.log('頁(yè)面顯示完成');
},
//監(jiān)聽頁(yè)面初次渲染完成
onReady() {
// console.log('頁(yè)面初次渲染完成');
},
//監(jiān)聽頁(yè)面隱藏
onHide() {
// console.log('頁(yè)面隱藏');
},
//監(jiān)聽頁(yè)面卸載
onUnload() {
// console.log('頁(yè)面卸載');
},
//組件的生命周期函數(shù)（同vue一樣）
beforeCreate(){
// console.log('組件創(chuàng)建之前徒河，此時(shí)還不能使用數(shù)據(jù)');
},
created(){
// console.log('組件創(chuàng)建完成谋国，此時(shí)可以操作數(shù)據(jù)');
},
beforeMount(){
// console.log('頁(yè)面掛載之前充甚，此時(shí)還不能手動(dòng)操作dom');
},
mounted(){
// console.log('頁(yè)面掛載完成，此時(shí)可以手動(dòng)操作dom');
},
beforeUpdate(){
// console.log('數(shù)據(jù)更新完成雷袋，頁(yè)面重新掛載之前');
},
updated(){
// console.log('數(shù)據(jù)更新完成，頁(yè)面重新掛載完成');
},
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,
})
}
//確認(rèn)框
export let $confirm=(content)=>{
return new Promise((resolve,reject)=>{
//確認(rèn)框
uni.showModal({
content:"確認(rèn)刪除嗎",
success:({confirm})=>{
if(confirm){
resolve()
}
}
})
})
}
(app.vue)
<script>
export default {
//項(xiàng)目生命周期
//初始化完成時(shí)觸發(fā)（全局只觸發(fā)一次）
onLaunch: function() {
// console.log('App Launch')
},
//每次啟動(dòng)應(yīng)用時(shí)觸發(fā)，從后臺(tái)進(jìn)入前臺(tái)顯示時(shí)觸發(fā)
onShow: function() {
// console.log('App Show')
},
//每次隱藏應(yīng)用時(shí)觸發(fā)莉给，從前臺(tái)進(jìn)入后臺(tái)時(shí)觸發(fā)
onHide: function() {
// console.log('App Hide')
}
}
</script>
<style>
/*每個(gè)頁(yè)面公共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)
//頁(yè)面配置 相當(dāng)于路由
{
"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)，參考：https://uniapp.dcloud.io/collocation/pages
//配置所有頁(yè)面信息
{
"path": "pages/index/index",
"style": {
//單獨(dú)設(shè)置頁(yè)面的頂部導(dǎo)航欄標(biāo)題廉沮，沒有設(shè)置 采用全局設(shè)置
"navigationBarTitleText": "首頁(yè)"
}
}
? ? ,{
? ? ? ? ? ? "path" : "pages/list/list",
? ? ? ? ? ? "style" :? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? {
? ? ? ? ? ? ? ? "navigationBarTitleText": "列表"
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? ,{
? ? ? ? ? ? "path" : "pages/order/order",
? ? ? ? ? ? "style" :? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? {
? ? ? ? ? ? ? ? "navigationBarTitleText": "訂單"
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? ,{
? ? ? ? ? ? "path" : "pages/mine/mine",
? ? ? ? ? ? "style" :? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? {
? ? ? ? ? ? ? ? "navigationBarTitleText": "我的"
? ? ? ? ? ? }
? ? ? ? }
? ? ],
//配置全局外觀
"globalStyle": {
//頂部導(dǎo)航欄標(biāo)題顏色
"navigationBarTextStyle": "white",
//頂部導(dǎo)航欄標(biāo)題內(nèi)容
"navigationBarTitleText": "my-app",
//頂部導(dǎo)航欄背景顏色
"navigationBarBackgroundColor": "#f07c82",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#cccccc",
"selectedColor": "#f07c82",
"list": [
{
"pagePath": "./pages/index/index",
"iconPath": "",
"selectedIconPath": "",
"text": "首頁(yè)"
},
{
"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;
