vue中的mescroll搜索運(yùn)用及各種填坑處理
更新時(shí)間：2019年10月30日 08:46:02 作者：huanghuamei206023
這篇文章主要介紹了vue中的mescroll搜索運(yùn)用及各種填坑處理，文中通過(guò)代碼給大家講解了mescroll vue使用，感興趣的朋友跟隨小編一起看看吧
父組件處理：
<template>
<div class="wrap">
<!-- 搜索框 -->
<div class="searchInputArea">
<div class="searchBarBox">
<div class="inputWrap" >
<form onsubmit="javascript:return false" action>
<input :placeholder = "placeholderStr" type="search" ref = "input" v-model="keyword" />
<span class="clearBtn" v-show="keyword" @click="clear"></span>
</form>
</div>
</div>
</div>
<div class="myFastChoiceBlock" v-show="!keyword">
<!-- 最近伙伴和我的關(guān)注 -->
<fast-choice :successInvite="successInvite" @invite="inviteClick"></fast-choice>
</div>
<div class="searchContainer">
<search-content :searchName="keyword" :successInvite="successInvite" @inviteClick="inviteClick" v-if="keyword !== ''"></search-content>
</div>
<!-- 協(xié)議彈出層 -->
<pop-up @change="closeLayer" v-if="popuShow">
<h2 class="title">{{protocolTitle}}</h2>
<div class="content" v-html="protocolCon"></div>
<div class="confirmBtn" :class="{active:isActive}" @click="confirmProtocol">{{btntxt}}</div>
<div class="popCloseCon" @click="closeActionClick"></div>
</pop-up>
<!-- 比例彈出層 -->
<scale @change="closeScale" @send="sendAjaxClick" :number="scaleCount" :scaleBtn="scaleBtn" :scaleDesc="scaleDesc" v-show="isScale" :userId="userId"></scale>
</div>
</template>
<script>
import FastChoice from './components/fastChoice';
import PopUp from './components/PopUp';
import scale from './components/scale';
import SearchContent from './components/searchContent';
const pageSize=10;
let t='';
export default {
name: "Search",
data() {
return {
placeholderStr: '搜一搜你想找的TA',
keyword: '',
list: [],
timerKey: null,
dataList:[],//列表數(shù)據(jù)
totalPage:1,
popuShow:false,//協(xié)議彈出層
isScale:false,//比例彈出層
scaleValue:'',//分成比例
userId:'',
isActive:true,//操作協(xié)議按鈕灰色顯示
sencond:5,//秒數(shù)
btntxt:'', //操作協(xié)議層按鈕文字顯示
scaleValue:'',//分成比例
scaleDesc:'',//比例彈窗描述
scaleBtn:'',
scaleCount:'50%',//默認(rèn)分成比例
successInvite: [],//默認(rèn)未邀請(qǐng)
protocolTitle:'',//協(xié)議標(biāo)題
protocolCon:'' //協(xié)議內(nèi)容
};
},
components:{FastChoice,PopUp,scale, SearchContent},
watch: {
keyword () {
if (!this.keyword){
return;
}
}
},
mounted() {
this.protocolAjax();
},
methods: {
//邀請(qǐng)
inviteClick (item) {
//點(diǎn)擊邀請(qǐng)過(guò)的不予操作
if(this.successInvite.indexOf(item.hwUserId) > -1 || item.inviteStatus){
return;
}
this.isScale = true;
this.userId = item.hwUserId;
this.scaleDesc = '邀請(qǐng)成功后你可獲取該用戶(hù)部分收益，選擇雙方都認(rèn)可的分成比例可以提高邀請(qǐng)成功率哦~';
this.scaleBtn = '發(fā)送邀請(qǐng)';
this.scaleCount = '50%';//邀請(qǐng)比例統(tǒng)一為50%
},
//點(diǎn)擊發(fā)送邀請(qǐng)
sendAjaxClick (value){
this.scaleValue = value;
this.popuShow = true;
this.isScale = false;
this.isActive = true;
this.sencond = 5 ;
this.timer();
},
//5s時(shí)間倒計(jì)時(shí)
timer() {
if (this.sencond > 0) {
this.btntxt="已閱讀同意并確認(rèn)邀請(qǐng)("+this.sencond+"s)";
this.sencond--;
t=setTimeout(this.timer, 1000);
} else{
this.isActive = false;
this.sencond = 5;
this.btntxt="已閱讀同意并確認(rèn)邀請(qǐng)";
}
},
//已閱讀同意并確認(rèn)
confirmProtocol () {
if(this.isActive){
return false;
}
this.sendAjax();
},
//發(fā)送邀請(qǐng)請(qǐng)求
sendAjax () {
console.log(this.scaleValue);
let dd = this.scaleValue.toString();
this.$request.post(_basePath + '/activity/page20191018/inviteArtist.html',{userId: this.userId,shareRate:this.scaleValue}).then((res) => {
this.successInvite.push(this.userId) ;
mui.toast("已發(fā)送邀請(qǐng)，對(duì)方接受后會(huì)通知你哦",2000);
this.closeActionClick();
}).catch(() => {})
},
//關(guān)閉操作協(xié)議彈窗
closeActionClick() {
this.popuShow = false;
clearTimeout(t);//清除倒計(jì)時(shí)
},
//關(guān)閉分成比例彈窗
closeScale () {
this.isScale = false;
},
clear () {
this.keyword = "";
this.$refs["input"].focus();
},
protocolAjax () {
this.$request.post(_basePath + '/activity/page20191018/queryProtocol.html',{type:0}).then((res) => {
this.protocolTitle = res.title;
this.protocolCon = res.content;
}).catch(() => {})
}
},
};
</script>
<style lang="scss" scoped>
@import "search";
</style>
子組件處理：
<template>
<div>
<div ref="mescroll" class="mescroll">
<div class="search-content wrapper" ref="scroller" >
<ul>
<li class="item" v-for="(item,index) in dataList" :key="index">
<div class="personBlock" @click="openUserClick(item.userDetail.userId)">
<div class="showImg">
<img :src="item.userDetail.userThumUrl" />
<template v-if="item.userDetail.kolFlag">
<em v-if="item.userDetail.kolFlag" class="icon c_kol"></em>
</template>
<template v-else>
<em class="icon c_company" v-if="item.userDetail.upSignType == '1'"></em>
<em class="icon c_person" v-if="item.userDetail.upSignType == '0'"></em>
</template>
</div>
<div class="showInfo">
<div class="name">{{item.userDetail.nickName}}</div>
<div class="attentionCount">
{{item.userDetail.fansCount || 0}}人關(guān)注TA
</div>
</div>
</div>
<div class="sendBtn" :class="{active:item.userDetail.inviteStatus || (successInvite.indexOf(item.userDetail.hwUserId) > -1 ) }" @click="inviteClick(item.userDetail)">
<span v-if="item.userDetail.inviteStatus || successInvite.indexOf(item.userDetail.hwUserId) > -1">已邀請(qǐng)</span>
<span v-else>邀請(qǐng)</span>
</div>
</li>
</ul>
</div>
</div>
<empty v-show="isEmpty">
<p class="note">納尼，竟然找不到這個(gè)人…</p>
</empty>
</div>
</template>
<script>
import MeScroll from 'mescroll.js';
import 'mescroll.js/mescroll.min.css';
import Empty from './empty';
const pageSize=10;
export default {
name: 'SearchContent',
props: {
searchName: {
type: String,
default: ''
},
successInvite: {
type: Array,
default: []
}
},
data() {
return {
dataList: [],
mescroll: null, //mescroll實(shí)例對(duì)象
totalPage:1,
isEmpty:false
}
},
components:{
Empty
},
watch: {
'searchName' () {
this.dataList = [];//要清空，不然有時(shí)候會(huì)出現(xiàn)上拉加載不了
this.searchName !== '' && this.mescroll.resetUpScroll();
}
},
mounted () {
console.log(this.searchName)
this.mescroll = new MeScroll(this.$refs.mescroll, { //在mounted初始化mescroll,確保此處配置的ref有值
down:{isLock: true}, //下拉刷新的配置. (如果下拉刷新和上拉加載處理的邏輯是一樣的,則down可不用寫(xiě)了)
up: {
callback: this.upCallback,
// 以下是一些常用的配置,當(dāng)然不寫(xiě)也可以的.
page: {
num: 0, //當(dāng)前頁(yè) 默認(rèn)0,回調(diào)之前會(huì)加1; 即callback(page)會(huì)從1開(kāi)始
size: 10, //每頁(yè)數(shù)據(jù)條數(shù),默認(rèn)10
},
htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">正在加載中..</p>',
htmlNodata: '<p class="upwarp-nodata" style="height:.4rem">當(dāng)當(dāng)當(dāng)~已經(jīng)到底啦~</p>',
noMoreSize: 1, //如果列表已無(wú)數(shù)據(jù),可設(shè)置列表的總數(shù)量要大于5才顯示無(wú)更多數(shù)據(jù);
isBounce: true,
},
down:{
use:false
},
});
},
methods: {
//點(diǎn)擊調(diào)起個(gè)人主頁(yè)
openUserClick (item) {
console.log(item)
var userId = item;
mui.openClient({"pageType": "userHome","userId":item});
},
//上拉回調(diào) page = {num:1, size:10}; num:當(dāng)前頁(yè) ,默認(rèn)從1開(kāi)始; size:每頁(yè)數(shù)據(jù)條數(shù),默認(rèn)10
upCallback(page) {
//聯(lián)網(wǎng)請(qǐng)求
this.$request.post(_basePath + '/activity/page20191018/searchAll.html', {hintKey:this.searchName,searchType:91,pageNo:page.num,pageSize:page.size,actionSource:'07'}).then((response) => {
if(response && response.resultList){
// 請(qǐng)求的列表數(shù)據(jù)
let result = response.resultList[0];
let arr = result.list;
// 如果是第一頁(yè)需手動(dòng)置空列表
if (page.num === 1) this.dataList = []
// 把請(qǐng)求到的數(shù)據(jù)添加到列表
this.dataList = this.dataList.concat(arr)
// 數(shù)據(jù)渲染成功后,隱藏下拉刷新的狀態(tài)
this.totalPage = result.total % pageSize > 0 ? Math.floor(result.total / 10 + 1) : result.total / 10;//計(jì)算總頁(yè)數(shù)超過(guò)就不loadMore
this.$nextTick(() => {
this.mescroll.endSuccess(arr.length);
this.mescroll.endByPage(arr.length, this.totalPage)
})
}else{
this.isEmpty = true;
this.mescroll.endErr();
}
}).catch(() => {
this.mescroll.endErr();
})
},
inviteClick(item) {
this.$emit('inviteClick',item);
}
}
}
</script>
<style lang="scss" scoped>
.mescroll {
position: fixed;
top: .9rem;
bottom: 0;
left:0;
height: auto;
}
.search-content{
padding:0 .24rem;
background: #121223;
ul{
height:auto;
.item{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
height:1.56rem;
.personBlock{
display:flex;
justify-content: flex-start;
align-items: center;
.showImg{
position:relative;
width:1rem;
height:1rem;
margin-right:.16rem;
border:.02rem solid #51516D;
border-radius:50%;
box-sizing: border-box;
img{width:100%;height:100%;border-radius:50%}
.icon{
position: absolute;
bottom:0;
right:0;
width:.28rem;
height:.28rem;
background-image:url();
background-repeat:no-repeat;
background-size:contain;
&.c_company{background-image:url(../../images/c_company.png);}
&.c_person{background-image:url(../../images/c_person.png);}
&.c_kol{background-image:url(../../images/kol.png);}
}
}
.showInfo{
.name{font-size:.3rem;color:#fff;font-weight:500;line-height:.42rem;text-align:left;}
.attentionCount{font-size:.26rem;font-weight:400;color:#716D80;text-align:left;}
}
}
.sendBtn{
width:1.44rem;
height:.56rem;
line-height:.56rem;
background:#FF005E;
border-radius:.28rem;
color:#fff;
text-align:center;
&.active{background:#2C2B41;color:#fff}
}
}
}
}
</style>
填坑處理：
1、用戶(hù)未輸入搜索關(guān)鍵詞時(shí)，mescroll不能就直接初始話，要在用戶(hù)輸入的時(shí)候才能初始化，所以子組件就接受了父組件的keyword，并用
v-if="keyword !== ''"來(lái)判斷加載子組件的條件，然后子組件通過(guò)監(jiān)聽(tīng)keyword的變化，重置mescroll：如下：
watch: {
'searchName' () {
this.dataList = [];//要清空，不然有時(shí)候會(huì)出現(xiàn)上拉加載不了
this.searchName !== '' && this.mescroll.resetUpScroll();
}
},
2、搜索完以后點(diǎn)擊搜索輸入框右邊里的關(guān)閉按鈕，發(fā)現(xiàn)其他列表不能滑動(dòng)。解決方法：要加：isBounce: true,
ps：下面看下mescroll vue使用
github: https://github.com/mescroll/mescroll
最好按照官方文檔來(lái)
開(kāi)啟初始化完畢之后自動(dòng)執(zhí)行上拉加載的回調(diào)，保證一進(jìn)入頁(yè)面，就去加載數(shù)據(jù)
上拉刷新的時(shí)候，或者tab切換的時(shí)候，先將數(shù)據(jù)置空
page 和 pageSize使用upOption中的，并且num默認(rèn)為0
代碼：
// html
<mescroll-uni top="100" @down="downCallback" @up="upCallback" @init="mescrollInit" :up="upOption" :down="downOption">
//data:
// 下拉刷新的常用配置
downOption: {
use: true, // 是否啟用下拉刷新; 默認(rèn)true
auto: false, // 是否在初始化完畢之后自動(dòng)執(zhí)行下拉刷新的回調(diào); 默認(rèn)true
},
// 上拉加載的常用配置
upOption: {
use: true, // 是否啟用上拉加載; 默認(rèn)true
auto: true, // 是否在初始化完畢之后自動(dòng)執(zhí)行上拉加載的回調(diào); 默認(rèn)true
textNoMore:'我是有底線的 >_<',
page: {
num:0,
size: 4
}
},
list:[],
//methods:
// 下拉回調(diào)
downCallback(mescroll){
mescroll.setPageNum(1)
this.list = []
mescroll.resetUpScroll();
setTimeout(()=>{
console.log(666);
// 隱藏下拉加載狀態(tài)
mescroll.endErr()
},1000)
},
// 上拉回調(diào)
upCallback(mescroll){
setTimeout(()=>{
let pageNum = mescroll.num == 0 ? 1: mescroll.num; // 頁(yè)碼, 默認(rèn)從1開(kāi)始
let pageSize = mescroll.size;
this.getPageList(pageNum, pageSize).then((res)=>{
mescroll.endSuccess(res)
})
},1000)
}
總結(jié)
以上所述是小編給大家介紹的vue中的mescroll搜索運(yùn)用及各種填坑處理,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue中v-for和v-if不能在同一個(gè)標(biāo)簽使用的最新解決方案
這篇文章主要介紹了vue中v-for和v-if不能在同一個(gè)標(biāo)簽的最新解決方案,這里描述了兩種解決方案，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue中require與import的區(qū)別詳解,require相當(dāng)于module.exports的傳送門(mén),module.exports后面的內(nèi)容是什么,require的結(jié)果就是什么,對(duì)象、數(shù)字、字符串、函數(shù),再把require的結(jié)果賦值給某個(gè)變量,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了cdn模式下vue的基本用法，本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-10-10
vue3-print-nb實(shí)現(xiàn)頁(yè)面打印(含分頁(yè)打印)示例代碼
大多數(shù)后臺(tái)系統(tǒng)中都存在打印的需求,在有打印需求時(shí),對(duì)前端來(lái)說(shuō)當(dāng)然是直接打印頁(yè)面更容易,下面這篇文章主要給大家介紹了關(guān)于vue3-print-nb實(shí)現(xiàn)頁(yè)面打印(含分頁(yè)打印)的相關(guān)資料,需要的朋友可以參考下2024-01-01
簡(jiǎn)化版的vue-router實(shí)現(xiàn)思路詳解
這篇文章主要介紹了簡(jiǎn)化版的vue-router,需要的朋友可以參考下2018-10-10
Vue利用mockjs編寫(xiě)假數(shù)據(jù)并應(yīng)用的問(wèn)題記錄
這篇文章主要介紹了Vue利用mockjs編寫(xiě)假數(shù)據(jù)并應(yīng)用,本文通過(guò)實(shí)例代碼給大家詳細(xì)講解，對(duì)Vue?mockjs數(shù)據(jù)相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2022-12-12
VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip
這篇文章主要介紹了VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
Vue前端判斷數(shù)據(jù)對(duì)象是否為空的實(shí)例
這篇文章主要介紹了Vue前端判斷數(shù)據(jù)對(duì)象是否為空的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
在本篇文章里小編給大家分享了關(guān)于Vue可自定義tab組件用法實(shí)例以及相關(guān)知識(shí)點(diǎn)，需要的朋友們參考下。2019-10-10
vue中el-tree動(dòng)態(tài)初始默認(rèn)選中和全選實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue中el-tree動(dòng)態(tài)初始默認(rèn)選中和全選實(shí)現(xiàn)的相關(guān)資料,eltree默認(rèn)選中eltree是一種常用的樹(shù)形控件,通常用于在網(wǎng)頁(yè)上呈現(xiàn)樹(shù)形結(jié)構(gòu)的數(shù)據(jù),例如文件夾、目錄、組織結(jié)構(gòu)等,需要的朋友可以參考下2023-09-09