vue中的mescroll搜索运用及各种填坑处理


Posted in Javascript onOctober 30, 2019

父组件处理:

<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();
    }
  },

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

ps:下面看下mescroll vue使用

github: https://github.com/mescroll/mescroll

官方文档:http://www.mescroll.com

最好按照官方文档来

开启初始化完毕之后自动执行上拉加载的回调,保证一进入页面,就去加载数据

上拉刷新的时候,或者tab切换的时候,先将数据置空

page 和 pageSize使用upOption中的,并且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搜索运用及各种填坑处理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue解决花括号数据绑定不成功的问题
Oct 30 #Javascript
vue中使用rem布局代码详解
Oct 30 #Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 #Javascript
Vue中图片Src使用变量的方法
Oct 30 #Javascript
解决VUE双向绑定失效的问题
Oct 29 #Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 #Javascript
vue获取form表单的值示例
Oct 29 #Javascript
You might like
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
js下写一个事件队列操作函数
2010/07/19 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
python实战教程之自动扫雷
2018/07/13 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
仓管岗位职责范本
2014/02/08 职场文书
技术总监管理职责范本
2014/03/06 职场文书
企业活动策划方案
2014/06/02 职场文书
授权委托书
2014/09/17 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
门面租赁合同范文
2019/08/06 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python