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

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

(0)

相关推荐

  • vue插件mescroll.js实现移动端上拉加载和下拉刷新

    做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js //不要使用cnpm安装 导入(在哪个页面使用,则在哪个页面导入(这里的话,我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是局部引入)): import MescrollVue from 'mescroll.js/mescroll.vue' 注册组件: components: { Mes

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

    父组件处理: <template> <div class="wrap"> <!-- 搜索框 --> <div class="searchInputArea"> <div class="searchBarBox"> <div class="inputWrap" > <form onsubmit="javascript:return false

  • Android ViewPager中显示图片与播放视频的填坑记录

    ViewPager介绍 ViewPager的功能就是可以使视图滑动,就像Lanucher左右滑动那样. ViewPager用于实现多页面的切换效果,该类存在于Google的兼容包android-support-v4.jar里面. ViewPager: 1)ViewPager类直接继承了ViewGroup类,所有它是一个容器类,可以在其中添加其他的view类. 2)ViewPager类需要一个PagerAdapter适配器类给它提供数据. 3)ViewPager经常和Fragment一起使用,并且

  • vue中watch监听器的触发时机(watch的坑及解决)

    目录 watch监听器的触发时机 起因 代码 watch 控制台 说明 vue watch的理解小记 watch监听器的触发时机 起因 我需要在页面created时获得商家的类型id值,然后监听id值,动态的改变请求接口的地址.请求接口的函数在mounted中执行.业务逻辑写完后发现,页面在第一次加载时,接口没有数据,原因接口地址为空,即接口地址没有改变. 代码 created() { this.typeId = this.$route.params.id; console.log("this.

  • vue中添加与删除关键字搜索功能

    具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible

  • vue中百度地图定位及附近搜索功能使用步骤

    目录 1.地图初始化相关 2.获取当前定位 3.根据当前定位地址附近搜索建议 1.地图初始化相关 文档:lbs.baidu.com/index.php?t… 申请账号 => 创建应用 => 生成key值 => 引入百度地图,替换key值 在出口html(public/html)文件下引入标签 <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&

  • VUE中使用Vue-resource完成交互

    本文介绍了VUE中使用Vue-resource完成交互,分享给大家,具体如下 使用vue-resource 引入vue-resource vue-resource就像jQuery里的$.ajax,是用来跟后端交互数据的,vue-resource是vue的一个插件,所以我们在开始使用vue之前,需要先引入vue-resource.js这个文件 <script src='js/vue.js'></script> <script src='js/vue-resource.js'&g

  • Vue中的数据监听和数据交互案例解析

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[1,2,3] } }).$watch("arr",function () { alert("数据改变了") }) html代码: <div id="div"> <input type="button" value="改变" @click=&

  • 基于vue实现多引擎搜索及关键字提示

    本文实例为大家分享了vue实现多引擎搜索及关键字提示的具体代码,供大家参考,具体内容如下 关键代码: <div class="header-search"> <form id="form" action="http://m.baidu.com/s" method="get" accept-charset="utf-8" class="clearfix" autocomp

  • vue中如何创建多个ueditor实例教程

    前言 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 具体可以参考这篇文章:http://www.jb51.net/article/118413.htm ueditor是百度编辑器,官网地址:http://ueditor.baidu.com/website/ 完整的功能演示,可以参考:http://ueditor.baidu.com/website/onlinedemo.html 最近工作中要求升级,需要

  • 浅谈vue中改elementUI默认样式引发的static与assets的区别

    首先从这说起 vue项目中的elementUI的默认样式怎么改 由于elementUI的样式太单调,比如这个slider滑块 elementUI中的API是没办法改变这个slider的颜色的,可是老板喜欢很黄,非要用yellow色.

随机推荐