???作者簡介：大家好，我是亦世凡華、渴望知識儲備自己的一名在校大學(xué)生
??個人主頁：亦世凡華、
??系列專欄：uni-app
??座右銘：人生亦可燃燒，亦可腐敗，我愿燃燒，耗盡所有光芒。
??引言
?????????經(jīng)過web前端的學(xué)習(xí)，相信大家對于前端開發(fā)有了一定深入的了解，今天我開設(shè)了uni-app專欄，主要想從移動端開發(fā)方向進(jìn)一步發(fā)展，而對于我來說寫移動端博文的第二站就是uni-app開發(fā)，希望看到我文章的朋友能對你有所幫助。
目錄
分類頁面
導(dǎo)航菜單設(shè)置
渲染左側(cè)內(nèi)容界面
三級分類跳轉(zhuǎn)到商品列表頁面
搜索組件樣式的實現(xiàn)
搜索頁面的功能實現(xiàn)
搜索頁面數(shù)據(jù)處理
分類頁面
分類頁面的頁面布局需要分為左右布局，左邊是導(dǎo)航菜單，右邊是具體內(nèi)容，在最頂部設(shè)置一個搜索框進(jìn)行相關(guān)關(guān)鍵字的搜索，具體的實現(xiàn)過程如下：
導(dǎo)航菜單設(shè)置
通過調(diào)用分類列表導(dǎo)航菜單數(shù)據(jù)接口，并將其轉(zhuǎn)存到data中在頁面中進(jìn)行調(diào)用，如下：
因為導(dǎo)航菜單打算占據(jù)整個可用視口，這里需要我們調(diào)用uni-app給我們提供的API，如下：
在頁面剛渲染的時候進(jìn)行調(diào)用這個API，如下：
接下來給菜單布局結(jié)構(gòu)和樣式，并設(shè)置當(dāng)我們點擊某個菜單時，給當(dāng)前的菜單添加一個點擊事件并給出相關(guān)樣式，給出完整代碼如下：
<template>
<view class="scroll-view-container">
<!-- 左側(cè)的滾動視圖區(qū)域 -->
<scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}" >
<block v-for="(item,index) in cateList" :key="index">
<view
:class="['left-scroll-view-item',index === active ? 'active' : '']"
@tap="activeChanged(index)"
>
{{item.cat_name}}
</view>
</block>
</scroll-view>
<!-- 右側(cè)的滾動視圖區(qū)域 -->
<scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}" >
<view class="left-scroll-view-item">zzz</view>
<view class="left-scroll-view-item">zzz</view>
<view class="left-scroll-view-item">zzz</view>
<view class="left-scroll-view-item">zzz</view>
<view class="left-scroll-view-item">zzz</view>
<view class="left-scroll-view-item">zzz</view>
<view class="left-scroll-view-item">zzz</view>
<view class="left-scroll-view-item">zzz</view>
<view class="left-scroll-view-item">zzz</view>
<view class="left-scroll-view-item">zzz</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
wh:0, // 當(dāng)前設(shè)備的可用高度
cateList:[], // 分類列表數(shù)據(jù)
active:0, // 默認(rèn)的激活項
};
},
onLoad() {
const sysInfo = uni.getSystemInfoSync()
this.wh = sysInfo.windowHeight
// 調(diào)用分類列表數(shù)據(jù)函數(shù)
this.getCateList()
},
methods:{
// 獲取分類列導(dǎo)航菜單表數(shù)據(jù)函數(shù)
getCateList(){
uni.request({
url:'https://www.uinav.com/api/public/v1/categories',
success:res => {
this.cateList = res.data.message
},
fail:error => {
uni.$showMsg()
}
})
},
// 改變導(dǎo)航菜單的激活狀態(tài)
activeChanged(index){
this.active = index
}
}
}
</script>
<style lang="scss">
// 解決小程序和app滾動條的問題
/* #ifdef MP-WEIXIN || APP-PLUS */
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
/* #endif */
// 解決H5 的問題
/* #ifdef H5 */
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
/* 隱藏滾動條，但依舊具備可以滾動的功能 */
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
/* #endif */
.scroll-view-container{
display: flex;
// 左側(cè)導(dǎo)航區(qū)域
.left-scroll-view{
width: 120px;
.left-scroll-view-item{
background-color: #ececec;
line-height: 60px;
text-align: center;
font-size: 15px;
&.active{
background-color: #FFFFFF;
position: relative;
&::before{
content: '';
display: block;
width: 3px;
height: 30px;
background-color: #C00000;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
}
}
}
</style>
渲染左側(cè)內(nèi)容界面
接下來實現(xiàn)左側(cè)內(nèi)容界面的樣式布局頁面的設(shè)置，在我們調(diào)用獲取分類列表導(dǎo)航菜單的數(shù)據(jù)當(dāng)中，存放著當(dāng)前分類下的二級分類的數(shù)據(jù)，我們需要將其提起并轉(zhuǎn)存到data當(dāng)中，如下：
ok，接下來我們需要在設(shè)置導(dǎo)航菜單的點擊事件中，根據(jù)索引，為導(dǎo)航菜單重新賦值 ：
接下來開始渲染左側(cè)內(nèi)容區(qū)域的相關(guān)內(nèi)容，給出的結(jié)構(gòu)如下：
相關(guān)樣式如下所示：
因為內(nèi)容在滑動的過程中發(fā)生了滑動距離，當(dāng)切換另一個界面時，滑動距離會保持原來的狀態(tài)，這里的話可用 scroll-top 屬性進(jìn)行解決，方法如下：
具體結(jié)果如下所示：
三級分類跳轉(zhuǎn)到商品列表頁面
接下來實現(xiàn)，當(dāng)我們點擊商品圖片的時候，進(jìn)行鏈接跳轉(zhuǎn)到商品列表頁面，如下：
具體實現(xiàn)效果如下：
搜索組件樣式的實現(xiàn)
因為搜索功能的組件在首頁和分類頁面都需要用到，所以這里我將搜索功能封裝成組件，在uni-app中約定俗成的要將組件都放置到components組件當(dāng)中去，如下：
在項目根目錄的 components 當(dāng)中，鼠標(biāo)右鍵，選擇右鍵新建組件，填寫組件信息之后，最后點擊 創(chuàng)建按鈕即可，如下：
接下來開始對搜索組件的內(nèi)容進(jìn)行相關(guān)編寫，設(shè)置兩個view進(jìn)行包裹，外層弄顏色里層弄樣式。樣式的數(shù)據(jù)可以設(shè)置props進(jìn)行動態(tài)的綁定數(shù)據(jù)，可以讓用戶根據(jù)傳遞的數(shù)值來動態(tài)渲染數(shù)據(jù)，具體編寫如下：
這里的 uni-icons 標(biāo)簽解釋一下，這里使用的是uni-app官網(wǎng)給我們提供的擴(kuò)展組件里面的樣式：
插件安裝完成之后，按照基本用法的方式進(jìn)行使用即可，相關(guān)樣式可以根據(jù)自己的需求進(jìn)行相關(guān)的修改即可，這里不再贅述，接下來給出搜索框的相關(guān)樣式的編寫，如下：
.my-search-container{
height: 50px;
align-items: center;
padding: 0 10px;
.my-search-box{
background-color: #FFFFFF;
height: 36px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.placeholder{
font-size: 15px;
margin-left: 5px;
}
}
}?因為搜索框本身的高度會擠占一部分可視化窗口，這里的話需要對原本分類界面的可視化距離進(jìn)行一個修改，讓其減去搜索框的高度，不然的話搜索框的隨著屏幕的滑動而消失，如下：
ok解決完分類的頁面路由，在首頁我們同樣需要使用搜索組件，這里的我采用的是固定定位進(jìn)行解決，解決完成之后，發(fā)現(xiàn)樣式有點丑，這里的話我將搜索組件的樣式設(shè)置為IE模型，如下：
具體實現(xiàn)的效果如下：
接下來實現(xiàn)當(dāng)點擊搜索組件時進(jìn)行頁面的跳轉(zhuǎn)，跳轉(zhuǎn)到一個單獨的搜索界面，實現(xiàn)過程如下：
搜索功能的實現(xiàn)很簡單，只需要在自定義組件的my-search組件中綁定點擊事件，讓其跳轉(zhuǎn)到相關(guān)頁面即可，然而在自定義組件中設(shè)置的點擊事件，默認(rèn)是傳遞自定義組件中的屬性事件，為了讓其變?yōu)樵狞c擊事件，需要借助uni-app的一個api：native如下：
接下來在分包的文件夾中新建search文件組件，當(dāng)點擊搜索組件時，跳轉(zhuǎn)到搜索頁面，如下：
搜索頁面的功能實現(xiàn)
接下來實現(xiàn)搜索界面的功能，這里需要借用uni-app官方給我們提供的擴(kuò)展組件，如下：
安裝完插件直接引入一個基本用法的案例即可，得到的界面如下，說明我們引入插件成功：
根據(jù)官網(wǎng)給我們提供的屬性數(shù)據(jù)，我們可以根據(jù)自己的需求來進(jìn)行相關(guān)的樣式處理，如下：
背景顏色和當(dāng)點擊搜索組件跳入到搜索頁面自動獲取焦點的功能，可以在插件的源代碼進(jìn)行修改
樣式布局完成之后，我們需要對輸入框進(jìn)行防抖處理，避免用戶在輸入過程中每次都瞬間獲取數(shù)據(jù)來消耗資源，如下：
接下來我們開始調(diào)用搜索內(nèi)容的接口，并將數(shù)據(jù)存放到data中去，如下：
搜索頁面數(shù)據(jù)處理
接下來將輸入框輸入的數(shù)據(jù)傳遞到后端，調(diào)用接口來獲取相關(guān)數(shù)據(jù)，并將數(shù)據(jù)渲染到前端頁面上，如下：
設(shè)置如下樣式：
接下來處理搜索完成后的歷史記錄，給出完整代碼如下：文章來源：http://www.zghlxwxcb.cn/news/detail-413413.html
<template>
<view>
<!-- 搜索輸入框 -->
<view class="search-box">
<uni-search-bar :radius="100" @input="input" cancelButton="none"></uni-search-bar>
</view>
<!-- 搜索列表界面 -->
<view class="sugg-list" v-if="searchResults.length !== 0">
<view class="sugg-item" v-for="(item,index) in searchResults" :key="index" @tap="gotoDetail(item)">
<view class="goods-name">{{item.goods_name}}</view>
<uni-icons type="arrowright" size="16"></uni-icons>
</view>
</view>
<!-- 搜索歷史 -->
<view class="history-box" v-else>
<!-- 標(biāo)題區(qū)域 -->
<view class="history-title">
<text>搜索歷史</text>
<uni-icons type="trash" size="17" @click="clean"></uni-icons>
</view>
<!-- 內(nèi)容區(qū)域 -->
<view class="history-tag">
<!-- <uni-tag text="標(biāo)簽"></uni-tag> -->
<uni-tag :inverted="true" :text="item" v-for="(item,index) in historys" :key="index" @click="gotoGoodsList(item)"/>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
timer:null, // 延時器的id
keywords:'' ,// 搜索的關(guān)鍵詞
searchResults:[], // 搜索的結(jié)果列表
historyList:[], // 搜索歷史記錄數(shù)據(jù)
};
},
onLoad() {
this.historyList = JSON.parse(uni.getStorageSync('keywords') || '[]')
},
computed: {
historys() {
// this.historyList = this.keywords
// 注意：由于數(shù)組是引用類型，所以不要直接基于原數(shù)組調(diào)用 reverse 方法，以免修改原數(shù)組中元素的順序
// 而是應(yīng)該新建一個內(nèi)存無關(guān)的數(shù)組，再進(jìn)行 reverse 反轉(zhuǎn)
return [...this.historyList].reverse()
}
},
methods:{
// 輸入框監(jiān)聽事件
input(e){
clearTimeout(this.timer)
this.timer = setTimeout(()=>{
this.keywords = e
this.getSearchList()
},500)
},
getSearchList(){
// 判斷搜索關(guān)鍵詞是否為空
if(this.keywords.length ===0 ){
this.searchResults = []
return
}
uni.request({
url:'https://www.uinav.com/api/public/v1/goods/qsearch',
data: {
query:this.keywords
},
success:res => {
this.searchResults = res.data.message
this.saveSearchHistory()
},
fail:error => {
uni.$showMsg()
}
})
},
// 跳轉(zhuǎn)到詳情頁面
gotoDetail(item){
uni.navigateTo({
url:'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
})
},
saveSearchHistory(){
// 保存歷史記錄
this.historyList.push(this.keywords)
// 1. 將 Array 數(shù)組轉(zhuǎn)化為 Set 對象
const set = new Set(this.historyList)
// 2. 調(diào)用 Set 對象的 delete 方法，移除對應(yīng)的元素
set.delete(this.keywords)
// 3. 調(diào)用 Set 對象的 add 方法，向 Set 中添加元素
set.add(this.keywords)
// 4. 將 Set 對象轉(zhuǎn)化為 Array 數(shù)組
this.historyList = Array.from(set)
// 調(diào)用 uni.setStorageSync(key, value) 將搜索歷史記錄持久化存儲到本地
uni.setStorageSync('keywords', JSON.stringify(this.historyList))
},
// 清空歷史記錄
clean(){
this.historyList = []
uni.setStorageSync('keywords','[')
},
// 點擊跳轉(zhuǎn)到商品列表頁面
gotoGoodsList(kw) {
uni.navigateTo({
url: '/subpkg/goods_list/goods_list?query=' + kw
})
}
}
}
</script>
<style lang="scss">
.search-box{
position: sticky;
top: 0;
z-index: 10;
}
.sugg-list{
padding: 0 5px;
.sugg-item{
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
padding: 13px 0;
border-bottom: 1px solid #efefef;
.goods-name{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.history-box{
padding: 0 5px;
.history-title{
display: flex;
justify-content: space-between;
height: 40px;
align-items: center;
font-size: 13px;
border-bottom: 1px solid #efefef;
}
.history-tag{
display: flex;
flex-wrap: wrap;
.uni-tag{
margin-top: 5px;
margin-right: 5px;
display: block;
text-align: center;
width: 20px;
}
}
}
</style>
文章來源地址http://www.zghlxwxcb.cn/news/detail-413413.html
到了這里，關(guān)于uni-app--》如何實現(xiàn)網(wǎng)上購物小程序（中上）？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
