im/pages/find/music/index.vue

<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>