Develop music Web app with Vue3.0
Vx (cmL46679910)
The learning content of chapter 5 is as follows :(video resource vx (cmL46679910 **)) ** player basic style and song playback function development,
<script> export default { name: 'playlist', components: { AddSong, Confirm, Scroll }, setup() { const visible = ref(false) const removing = ref(false) const scrollRef = ref(null) const listRef = ref(null) const confirmRef = ref(null) const addSongRef = ref(null) const store = useStore() const playlist = computed(() => store.state.playlist) const sequenceList = computed(() => store.state.sequenceList) const currentSong = computed(() => store.getters.currentSong) const { modeIcon, modeText, changeMode } = useMode() const { getFavoriteIcon, toggleFavorite } = useFavorite() watch(currentSong, async (newSong) => { if (! visible.value || ! newSong.id) { return } await nextTick() scrollToCurrent() }) function getCurrentIcon(song) { if (song.id === currentSong.value.id) { return 'icon-play' } } async function show() { visible.value = true await nextTick() refreshScroll() scrollToCurrent() } function hide() { visible.value = false } function selectItem(song) { const index = playlist.value.findIndex((item) => { return song.id === item.id }) store.commit('setCurrentIndex', index) store.commit('setPlayingState', true) } function refreshScroll() { scrollRef.value.scroll.refresh() } function scrollToCurrent() { const index = sequenceList.value.findIndex((song) => { return currentSong.value.id === song.id }) if (index === -1) { return } const target = listRef.value.$el.children[index] scrollRef.value.scroll.scrollToElement(target, 300) } function removeSong(song) { if (removing.value) { return } removing.value = true store.dispatch('removeSong', song) if (! playlist.value.length) { hide() } setTimeout(() => { removing.value = false }, 300)} function confirmClear() {confirmref.value.show ()} function confirmClear() {store.disp** (video resource vx (** cmL46679910) **)) **atch('clearSongList') hide()} function showAddSong() {addsongref.value.show ()}}} </script>Copy the codePlayer playback button pause and playback logic development, player song forward and backward logic development, player DOM exception error handling, player song playback mode related logic development,
Export default {name: 'tabs ', data() {return {tabs: [{name:' tabs ', path: '/recommend'}, {name: 'tabs ', path: '/recommend'}, '/ singer'}, {name: 'ranking, path:'/top - list '}, {name: 'search' path: '/ search'} < / script >Copy the codeMiddle view layer finger interaction related logic development (top), player middle view layer finger interaction related logic development (bottom), player mini player development (01), player Mini player development (02), player Mini player open (03), player mini player development (04), player Full screen toggle transition effect (top), player full screen toggle transition effect (bottom), player playlist component (01), player playlist component (02), player playlist component (03), player playlist component (04), player Playlist component implementation (05), player Scroll list highly adaptive, player high order Scroll component implementation.
The learning content of chapter 6 is as follows: Playlist details page development (top), playlist details page development (bottom), leaderboard page development, leaderboard details page development (top), leaderboard details page development (bottom).
export default { name: 'suggest', props: { query: String, showSinger: { type: Boolean, default: true } }, emits: ['select-song', 'select-singer'], setup(props, { emit }) { const singer = ref(null) const songs = ref([]) const hasMore = ref(true) const page = ref(1) const LoadingText = ref(") const noResultText = ref(") Const manualLoading = ref(false) const loading = computed(() => {return! singer.value && ! songs.value.length }) const noResult = computed(() => { return ! singer.value && ! songs.value.length && ! hasMore.value }) const pullUpLoading = computed(() => { return isPullUpLoad.value && hasMore.value }) const preventPullUpLoad = computed(() => { return loading.value || manualLoading.value }) const { isPullUpLoad, rootRef, scroll } = usePullUpLoad(searchMore, preventPullUpLoad) watch(() => props.query, async (newQuery) => { if (! newQuery) { return } await searchFirst() }) async function searchFirst() { if (! props.query) { return } page.value = 1 songs.value = [] singer.value = null hasMore.value = true const result = await search(props.query, page.value, props.showSinger) songs.value = await processSongs(result.songs) singer.value = result.singer hasMore.value = result.hasMore await nextTick() await makeItScrollable() } async function searchMore() { if (! hasMore.value || ! props.query) { return } page.value++ const result = await search(props.query, page.value, props.showSinger) songs.value = songs.value.concat(await processSongs(result.songs)) hasMore.value = result.hasMore await nextTick() await makeItScrollable() } async function makeItScrollable() { if (scroll.value.maxScrollY >= -1) { manualLoading.value = true await searchMore() manualLoading.value = false } } function selectSong(song) { emit('select-song', song) } function selectSinger(singer) { emit('select-singer', singer) } } } </script>Copy the codeThe study content of chapter 7 is as follows: search page search box development, search page hot search development, search page Suggest component development (01), search page Suggest component development (02),
Export default {name: 'tabs ', data() {return {tabs: [{name:' tabs ', path: '/recommend'}, {name: 'tabs ', path: '/recommend'}, '/ singer'}, {name: 'ranking, path:'/top - list '}, {name: 'search' path: '/ search'}]}}} < / script >Copy the codeSearch page Suggest component development (03), search page Suggest component development (04), search page Suggest component development (05), search page Suggest component development (06), (video resource VX (cmL46679910)) search page Suggest component development, search page search history function development (01), search page search history function development (02), search page search history function development (03), search page search history function development (04).
import { debounce } from 'throttle-debounce' export default { name: 'search-input', props: { modelValue: String, placeholder: {type: String, default: 'search for song'}}, data() {return {query: this.modelValue } }, created() { this.$watch('query', debounce(300, (newQuery) => { this.$emit('update:modelValue', newQuery.trim()) })) this.$watch('modelValue', (newVal) => { this.query = newVal }) }, methods: { clear() { this.query = '' } } } </script> <style lang="scss" scoped> .search-input { display: flex; align-items: center; box-sizing: border-box; width: 100%; padding: 0 6px; height: 32px; background: $color-highlight-background; border-radius: 6px; .icon-search { font-size: 24px; color: $color-text-d; } .input-inner { flex: 1; margin: 0 5px; line-height: 18px; background: $color-highlight-background; color: $color-text; font-size: $font-size-medium; outline: 0; &::placeholder { color: $color-text-d; } } .icon-dismiss { font-size: 16px; color: $color-text-d; } } </style>Copy the codeThe learning content of Chapter 8 is as follows: Add Songs to list development (01), Add songs to list development (02), Add songs to list development (03), Add songs to list development (04), (video resources Vx (cmL46679910) Add songs to list function development (05), user center page development (01), user center page development (02), user center page development (03).
export default { name: 'add-song', components: { SearchInput, Suggest, Switches, Scroll, SongList, SearchList, Message }, setup() { const visible = ref(false) const query = ref('') const currentIndex = ref(0) const scrollRef = ref(null) const messageRef = ref(null) const store = useStore() const searchHistory = computed(() => store.state.searchHistory) const playHistory = computed(() => store.state.playHistory) const { saveSearch } = useSearchHistory() watch(query, async () => { await nextTick() refreshScroll() }) async function show() { visible.value = true await nextTick() refreshScroll() } function hide() { visible.value = false } function refreshScroll() { scrollRef.value.scroll.refresh() } function addQuery(s) { query.value = s } function selectSongBySongList({ song }) { addSong(song) } function selectSongBySuggest(song) { addSong(song) saveSearch(query.value) } function addSong(song) { store.dispatch('addSong', song) showMessage() } function showMessage() { messageRef.value.show() }Copy the codeChapter 9 covers keep-alive applications, asynchronous loading of routing components, and project deployment.