文章目錄

• 項目需求
• 新建頁面的兩種方式
• 主頁選項卡
• • tabBar
• 輪播
• • swiper
• 輪播優化
• 搜索區域
• 列表頁
• 列表頁數據展示
• 跳轉到播放頁面
• • wx.navigateTo
  • bindtap="play"

項目需求

新建頁面的兩種方式

1、直接在目錄里對應的文件夾點擊右鍵新建

2、在最外層app.json里找到pages{}創建

子頁面必須在全局文件里面注冊

"pages": ["pages/list/list","pages/my/my"],

主頁選項卡

app.json設置主頁欄

"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#f00","navigationBarTitleText": "絡繹云音樂","navigationBarTextStyle": "black"},

tabBar

功能：如果小程序是一個多tab應用（客戶端窗口的底部或頂部有tab欄可以切換頁面），可以通過tabBar配置項指定tab欄的表現，以及tab切換時顯示的對應頁面。

為tabBar配置項添加list屬性，注意tab列表最少2個，最多5個tab。

這里利用它來做最下方的頁面跳轉列表。

代碼示例:

"tabBar": {"color": "#aaaaaa", //文字顏色"selectedColor": "#2E87E4", //文字選中的顏色"backgroundColor": "#ddd", //tab背景色"borderStyle": "black", //tabBar上邊框顏色"position": "top", //tabBar位置頂部top或底部bottom"list": [{"pagePath": "pages/list/list",//鏈接，無需加文件后綴（必填）"text": "音樂",//文字（必填）"iconPath": "images/music.png",//默認圖標 "selectedIconPath": "images/music-active.png" //選中圖標},{"pagePath": "pages/my/my","text": "我的","iconPath": "images/my.png","selectedIconPath": "images/my-active.png"}]} }

設置選項卡

輪播

swiper

滑塊視圖容器。其中只可放置swiper-item組件，否則會導致未定義的行為。

屬性類型默認值必填說明最低版本

indicator-dots	boolean	false	否	是否顯示面板指示點	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示點顏色	1.1.0
indicator-active-color	color	#000000	否	當前選中的指示點顏色	1.1.0
autoplay	boolean	false	否	是否自動切換	1.0.0
current	number	0	否	當前所在滑塊的 index	1.0.0
interval	number	5000	否	自動切換時間間隔	1.0.0

<swiper autoplay="true" interval="2000" circular="true" indicator-dots="true" indicator-color="grey" indicator-active-color="yellow" ></swiper>

輪播優化

一般用來做廣告，不能寫死。地址由后臺顯示。

用循環wx:for="{{imgs}}"輸出圖片。

<swiper-item wx:for="{{imgs}}"><image mode="aspectFill" src="{{item}}"></image></swiper-item>

搜索區域

搜索區域分為兩部分。input里包含一個input和一個searching。

<view class="search"><view class="input"><input placeholder="歌曲名/歌手" /></view><view class="searchimg"><button size="mini" type="primary">搜索</button></view> </view>

wxss里調整邊距 padding-top:5rpx

列表頁

整個列表為list 。

其包含縱向排列的item，item則分為三部分左中右。

<!-- 列表頁區域 --> <view class="list"><view class="item" wx:for="{{lists}}"><view class="left"><image mode="scaleToFill" src="{{item.img}}"></image></view><view class="middle"><text class="song">{{item.song}}</text><text class="name">{{item.name}}</text></view><view class="right" bindtap="play" data-mid="{{item.id}}" ><image mode="aspectFill" src="/images/more.png"></image></view></view> </view>

列表頁數據展示

跳轉到播放頁面

pages下面新建play，可以點擊圖片跳轉到播放頁面

wx.navigateTo

保留當前頁面，跳轉到應用內的某個頁面，但是不能跳轉到tabbar頁面，使用wx.navigateBack（）可以返回原頁面。小程序中頁面棧最多十層。

參數類型：Object

url：表示需要跳轉的非tabBar得頁面路徑，路徑后面可以攜帶參數

play:function(res){console.log(res.currentTarget.dataset.mid)//1. 跳轉wx.navigateTo({url: '/pages/play/play',})//2. 攜帶數據，id}

bindtap=“play”

手指觸摸后馬上離開，即點擊播放play

<view class="right" bindtap="play" data-mid="{{item.id}}" ><image mode="aspectFill" src="/images/more.png"></image></view>

同時id不能寫死。data-mid="{{item.id}}

總結

以上是生活随笔為你收集整理的网易云音乐——Web学习day6的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。