增加音乐,摇一摇,服务等页面
This commit is contained in:
cansnow
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title="" :background="{ background: '#ffffff' }"
|
||||
:border-bottom="false" z-index="1001">
|
||||
<view class="slot-wrap u-font-32">
|
||||
<view class="u-font-32" style="width: 100%;">
|
||||
<u-tabs :list="tabList" active-color="#2ebe4b"
|
||||
:is-scroll="false" :show-bar="true" :font-size="34"
|
||||
:current="currentTab" :active-item-style="activeItemStyle"
|
||||
@change="tabChange"></u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view>
|
||||
|
||||
<view class="u-p-l-40 u-p-r-40">
|
||||
<view class="u-m-t-20 u-m-b-20">
|
||||
<u-search placeholder="支持搜索歌手,歌名,专辑"
|
||||
border-color="#eeeeee"
|
||||
bg-color="#ffffff"
|
||||
shape="square"
|
||||
:clearabled="true"
|
||||
:show-action="true"
|
||||
:action-style="actionStyle"
|
||||
:animation="false"
|
||||
height="80"
|
||||
@search="search"
|
||||
@custom="search"
|
||||
v-model="searchWord">
|
||||
</u-search>
|
||||
</view>
|
||||
<scroll-view
|
||||
:scroll-x="false" :scroll-y="true" :style="'height:'+(pageHeight)+'px'">
|
||||
<u-row>
|
||||
<u-col :span="12">
|
||||
<view class="u-p-30 u-font-36" style="font-weight: bold;">
|
||||
<text>热门男歌手</text>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="4" v-for="(item,index) in singerManList" :key="index">
|
||||
<view class="u-m-b-30" @click="toSongList(item)">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image width="100%" height="130rpx"
|
||||
border-radius="16rpx"
|
||||
mode="heightFix"
|
||||
:src="item.avatar"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view style="text-align: center;margin-top:4rpx;font-size: 26rpx;color: #000000;">
|
||||
<text>{{item.singerName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
|
||||
<u-row>
|
||||
<u-col :span="12">
|
||||
<view class="u-p-30 u-font-36" style="font-weight: bold;">
|
||||
<text>热门女歌手</text>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="4" v-for="(item,index) in singerWomenList" :key="index">
|
||||
<view class="u-m-b-30" @click="toSongList(item)">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image width="100%" height="130rpx"
|
||||
border-radius="16rpx"
|
||||
mode="heightFix"
|
||||
:src="item.avatar"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view style="text-align: center;margin-top:4rpx;font-size: 26rpx;color: #000000;">
|
||||
<text>{{item.singerName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageHeight:0,
|
||||
tabList:[
|
||||
{
|
||||
name: '在线听'
|
||||
},
|
||||
{
|
||||
name: '本地听'
|
||||
},
|
||||
],
|
||||
currentTab:0,
|
||||
activeItemStyle:{
|
||||
fontSize:'36rpx',
|
||||
},
|
||||
actionStyle:{
|
||||
backgroundColor:'#46be72',
|
||||
color:'#ffffff',
|
||||
height:'80rpx',
|
||||
lineHeight:'80rpx',
|
||||
position:'relative',
|
||||
left:'0rpx',
|
||||
textAlign:'center',
|
||||
width:'140rpx',
|
||||
borderRadius:'10rpx',
|
||||
borderTopRightRadius:'10rpx',
|
||||
borderBottomRightRadius:'10rpx'
|
||||
},
|
||||
searchWord:'',
|
||||
singerManList:[
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
|
||||
singerName:'周杰伦'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001BLpXF2DyJe2.jpg?max_age=2592000',
|
||||
singerName:'林俊杰'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000002J4UUk29y8BY.jpg?max_age=2592000',
|
||||
singerName:'薛之谦'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
|
||||
singerName:'陈奕迅'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000002azErJ0UcDN6.jpg?max_age=2592000',
|
||||
singerName:'张杰'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP_4.jpg?max_age=2592000',
|
||||
singerName:'刘德华'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000004NMZuf2BLjg8_2.jpg?max_age=2592000',
|
||||
singerName:'周传雄'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000000aHmbL2aPXWH.jpg?max_age=2592000',
|
||||
singerName:'李荣浩'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000003fA5G40k6hKc.jpg?max_age=2592000',
|
||||
singerName:'周深'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001IoTZp19YMDG.jpg?max_age=2592000',
|
||||
singerName:'易烊千玺'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001z2JmX09LLgL.jpg?max_age=2592000',
|
||||
singerName:'汪苏泷'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000000CK5xN3yZDJt.jpg?max_age=2592000',
|
||||
singerName:'许嵩'
|
||||
}
|
||||
],
|
||||
singerWomenList:[
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001fNHEf1SFEFN.jpg?max_age=2592000',
|
||||
singerName:'G.E.M.邓紫棋'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M0000003ZpE43ypssl.jpg?max_age=2592000',
|
||||
singerName:'张碧晨'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000000oCQfT3kdonw.jpg?max_age=2592000',
|
||||
singerName:'黄霄雲'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000002lKaDq2lLLtk.jpg?max_age=2592000',
|
||||
singerName:'蔡健雅'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000002azErJ0UcDN6.jpg?max_age=2592000',
|
||||
singerName:'苏星婕'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000003iPzNg35cWzp.jpg?max_age=2592000',
|
||||
singerName:'程响'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000000aw4WC2EQYTv_5.jpg?max_age=2592000',
|
||||
singerName:'张靓颖'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000000GGDys0yA0Nk_2.jpg?max_age=2592000',
|
||||
singerName:'梁静茹'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001pWERg3vFgg8.jpg?max_age=2592000',
|
||||
singerName:'孙燕姿'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000000GDDuQ3sGQiT.jpg?max_age=2592000',
|
||||
singerName:'王菲'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000003jJGvv3C82KZ_5.jpg?max_age=2592000',
|
||||
singerName:'刘若英'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000002raUWw3PXdkT_5.jpg?max_age=2592000',
|
||||
singerName:'张韶涵'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
created:function(){
|
||||
let pageHeight= this.$u.sys().windowHeight*0.82;
|
||||
this.pageHeight=pageHeight;
|
||||
},
|
||||
methods: {
|
||||
tabChange:function(index){
|
||||
this.currentTab = index;
|
||||
},
|
||||
search:function(value){
|
||||
console.log("搜索关键字",value);
|
||||
let that=this;
|
||||
if(value.length>0){
|
||||
this.$u.route({
|
||||
url:'pages/tabbar/find/music/song-list',
|
||||
params:{
|
||||
keyWords:value
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
toSongList:function(singer){
|
||||
let that=this;
|
||||
this.$u.route({
|
||||
url:'pages/tabbar/find/music/song-list',
|
||||
params:{
|
||||
keyWords:singer.singerName
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.slot-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 如果您想让slot内容占满整个导航栏的宽度 */
|
||||
flex: 1;
|
||||
/* 如果您想让slot内容与导航栏左右有空隙 */
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user