10betvue的mescroll搜索运用以及各种填坑处理

来源:http://www.chinese-glasses.com 作者:Web前端 人气:181 发布时间:2020-04-15
摘要:填坑处理: 10bet,子组件处理: 时间: 2019-09-28阅读: 91标签: 搜索 template div !-- 搜索框 -- div div div form onsubmit="javascript:return false" action input :placeholder = "placeholderStr" type="search" ref = "input"

填坑处理:

10bet,子组件处理:

时间: 2019-09-28阅读: 91标签: 搜索

template div  !-- 搜索框 -- div  div  div  form onsubmit="javascript:return false" action input :placeholder = "placeholderStr" type="search" ref = "input" v-model="keyword" / span v-show="keyword" @click="clear"/span /form /div /div /div div v-show="!keyword" !-- 最近伙伴和我的关注 -- fast-choice :successInvite="successInvite" @invite="inviteClick"/fast-choice /div div  search-content :searchName="keyword" :successInvite="successInvite" @inviteClick="inviteClick" v-if="keyword !== ''"/search-content /div !-- 协议弹出层 -- pop-up @change="closeLayer" v-if="popuShow" h2 {{protocolTitle}}/h2 div v-html="protocolCon"/div div : @click="confirmProtocol"{{btntxt}}/div div @click="closeActionClick"/div /pop-up !-- 比例弹出层 -- scale @change="closeScale" @send="sendAjaxClick" :number="scaleCount" :scaleBtn="scaleBtn" :scaleDesc="scaleDesc" v-show="isScale" :userId="userId"/scale /div/templatescript 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(() = {}) } }, };/scriptstyle lang="scss" scoped @import "search";/style

1、用户未输入搜索关键词时,mescroll不能就直接初始话,要在用户输入的时候才能初始化,所以子组件就接受了父组件的keyword,并用v-if="keyword !== ''"来判断加载子组件的条件,然后子组件通过监听keyword的变化,重置mescroll:如下:

template div div ref="mescroll"  div ref="scroller"  ul li v-for="(item,index) in dataList" :key="index" div @click="openUserClick(item.userDetail.userId)" div  img :src="item.userDetail.userThumUrl" / template v-if="item.userDetail.kolFlag" em v-if="item.userDetail.kolFlag" /em /template template v-else em v-if="item.userDetail.upSignType == '1'"/em em v-if="item.userDetail.upSignType == '0'"/em /template /div div  div {{item.userDetail.nickName}}/div div  {{item.userDetail.fansCount || 0}}人关注TA /div /div /div div : @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 纳尼,竟然找不到这个人…/p /empty /div /templatescriptimport 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 /pp 正在加载中../p', htmlNodata: 'p 当当当~已经到底啦~/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); }}}/scriptstyle 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
watch: { 'searchName' () { this.dataList = [];//要清空,不然有时候会出现上拉加载不了 this.searchName !== ''  this.mescroll.resetUpScroll(); } },

父组件处理:

2、搜索完以后点击搜索输入框右边里的关闭按钮,发现其他列表不能滑动。解决方法:要加:isBounce: true

本文由10bet发布于Web前端,转载请注明出处:10betvue的mescroll搜索运用以及各种填坑处理

关键词:

上一篇:初级程序员如何提升自己?

下一篇:没有了

最火资讯