vueの中のmescroll検索運用及び各種ピット処理
親コンポーネントの処理:
1、ユーザーが検索キーワードを入力していない場合、mescrollは直接初期化できないと、ユーザーが入力する時に初期化できないので、サブアセンブリは親のコンポーネントのkeywordを受け入れて、そして使う。
ps：以下はmescroll vueを見て使います。
github:https://github.com/mescroll/mescroll
公式文書：http://www.mescroll.com
公式文書にしたほうがいいです。
初期化が完了したら自動的にアップロードのコールバックを実行し、ページに入るとデータをロードすることを保証します。
アップデート時、またはタブ切り替え時に、データを空にします。
pageとpageSizeはuption中のものを使用し、numはデフォルトで0です。
コード:
以上は小编が皆さんに绍介したvueの中のmescroll検索运用と各种の埋め立て処理です。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。
<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">
<!-- -->
<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>
<!-- -->
<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:[],//
totalPage:1,
popuShow:false,//
isScale:false,//
scaleValue:'',//
userId:'',
isActive:true,//
sencond:5,//
btntxt:'', //
scaleValue:'',//
scaleDesc:'',//
scaleBtn:'',
scaleCount:'50%',//
successInvite: [],//
protocolTitle:'',//
protocolCon:'' //
};
},
components:{FastChoice,PopUp,scale, SearchContent},
watch: {
keyword () {
if (!this.keyword){
return;
}
}
},
mounted() {
this.protocolAjax();
},
methods: {
//
inviteClick (item) {
//
if(this.successInvite.indexOf(item.hwUserId) > -1 || item.inviteStatus){
return;
}
this.isScale = true;
this.userId = item.hwUserId;
this.scaleDesc = ' ， ~';
this.scaleBtn = ' ';
this.scaleCount = '50%';// 50%
},
//
sendAjaxClick (value){
this.scaleValue = value;
this.popuShow = true;
this.isScale = false;
this.isActive = true;
this.sencond = 5 ;
this.timer();
},
//5s
timer() {
if (this.sencond > 0) {
this.btntxt=" ("+this.sencond+"s)";
this.sencond--;
t=setTimeout(this.timer, 1000);
} else{
this.isActive = false;
this.sencond = 5;
this.btntxt=" ";
}
},
//
confirmProtocol () {
if(this.isActive){
return false;
}
this.sendAjax();
},
//
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(" ， ",2000);
this.closeActionClick();
}).catch(() => {})
},
//
closeActionClick() {
this.popuShow = false;
clearTimeout(t);//
},
//
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}} 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"> </span>
<span v-else> </span>
</div>
</li>
</ul>
</div>
</div>
<empty v-show="isEmpty">
<p class="note"> ， …</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
totalPage:1,
isEmpty:false
}
},
components:{
Empty
},
watch: {
'searchName' () {
this.dataList = [];// ，
this.searchName !== '' && this.mescroll.resetUpScroll();
}
},
mounted () {
console.log(this.searchName)
this.mescroll = new MeScroll(this.$refs.mescroll, { // mounted mescroll, ref
down:{isLock: true}, // . ( , down )
up: {
callback: this.upCallback,
// , .
page: {
num: 0, // 0, 1; callback(page) 1
size: 10, // , 10
},
htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip"> ..</p>',
htmlNodata: '<p class="upwarp-nodata" style="height:.4rem"> ~ ~</p>',
noMoreSize: 1, // , 5 ;
isBounce: true,
},
down:{
use:false
},
});
},
methods: {
//
openUserClick (item) {
console.log(item)
var userId = item;
mui.openClient({"pageType": "userHome","userId":item});
},
// page = {num:1, size:10}; num: , 1 ; size: , 10
upCallback(page) {
//
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){
//
let result = response.resultList[0];
let arr = result.list;
//
if (page.num === 1) this.dataList = []
//
this.dataList = this.dataList.concat(arr)
// ,
this.totalPage = result.total % pageSize > 0 ? Math.floor(result.total / 10 + 1) : result.total / 10;// 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、ユーザーが検索キーワードを入力していない場合、mescrollは直接初期化できないと、ユーザーが入力する時に初期化できないので、サブアセンブリは親のコンポーネントのkeywordを受け入れて、そして使う。
v-if="keyword !== ''"は、ロードサブアセンブリの条件を判断し、その後、サブアセンブリは、keywordの変化を傍受することによって、mescrollをリセットする。
watch: {
'searchName' () {
this.dataList = [];// ，
this.searchName !== '' && this.mescroll.resetUpScroll();
}
},ps：以下はmescroll vueを見て使います。
github:https://github.com/mescroll/mescroll
公式文書：http://www.mescroll.com
公式文書にしたほうがいいです。
初期化が完了したら自動的にアップロードのコールバックを実行し、ページに入るとデータをロードすることを保証します。
アップデート時、またはタブ切り替え時に、データを空にします。
pageとpageSizeはuption中のものを使用し、numはデフォルトで0です。
コード:
// html
<mescroll-uni top="100" @down="downCallback" @up="upCallback" @init="mescrollInit" :up="upOption" :down="downOption">
//data:
//
downOption: {
use: true, // ; true
auto: false, // ; true
},
//
upOption: {
use: true, // ; true
auto: true, // ; true
textNoMore:' >_<',
page: {
num:0,
size: 4
}
},
list:[],
//methods:
//
downCallback(mescroll){
mescroll.setPageNum(1)
this.list = []
mescroll.resetUpScroll();
setTimeout(()=>{
console.log(666);
//
mescroll.endErr()
},1000)
},
//
upCallback(mescroll){
setTimeout(()=>{
let pageNum = mescroll.num == 0 ? 1: mescroll.num; // , 1
let pageSize = mescroll.size;
this.getPageList(pageNum, pageSize).then((res)=>{
mescroll.endSuccess(res)
})
},1000)
}以上は小编が皆さんに绍介したvueの中のmescroll検索运用と各种の埋め立て処理です。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。