经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue的mescroll搜索运用以及各种填坑处理
来源:cnblogs  作者:huanghuamei206023  时间:2019/10/30 9:15:03  对本文有异议
  1. 父组件处理:
  1. 1 <template>
  2. 2 <div class="wrap">
  3. 3 <!-- 搜索框 -->
  4. 4 <div class="searchInputArea">
  5. 5 <div class="searchBarBox">
  6. 6 <div class="inputWrap" >
  7. 7 <form onsubmit="javascript:return false" action>
  8. 8 <input :placeholder = "placeholderStr" type="search" ref = "input" v-model="keyword" />
  9. 9 <span class="clearBtn" v-show="keyword" @click="clear"></span>
  10. 10 </form>
  11. 11 </div>
  12. 12 </div>
  13. 13 </div>
  14. 14 <div class="myFastChoiceBlock" v-show="!keyword">
  15. 15 <!-- 最近伙伴和我的关注 -->
  16. 16 <fast-choice :successInvite="successInvite" @invite="inviteClick"></fast-choice>
  17. 17 </div>
  18. 18 <div class="searchContainer">
  19. 19 <search-content :searchName="keyword" :successInvite="successInvite" @inviteClick="inviteClick" v-if="keyword !== ''"></search-content>
  20. 20 </div>
  21. 21 <!-- 协议弹出层 -->
  22. 22 <pop-up @change="closeLayer" v-if="popuShow">
  23. 23 <h2 class="title">{{protocolTitle}}</h2>
  24. 24 <div class="content" v-html="protocolCon"></div>
  25. 25 <div class="confirmBtn" :class="{active:isActive}" @click="confirmProtocol">{{btntxt}}</div>
  26. 26 <div class="popCloseCon" @click="closeActionClick"></div>
  27. 27 </pop-up>
  28. 28 <!-- 比例弹出层 -->
  29. 29 <scale @change="closeScale" @send="sendAjaxClick" :number="scaleCount" :scaleBtn="scaleBtn" :scaleDesc="scaleDesc" v-show="isScale" :userId="userId"></scale>
  30. 30 </div>
  31. 31 </template>
  32. 32
  33. 33 <script>
  34. 34 import FastChoice from './components/fastChoice';
  35. 35 import PopUp from './components/PopUp';
  36. 36 import scale from './components/scale';
  37. 37 import SearchContent from './components/searchContent';
  38. 38 const pageSize=10;
  39. 39 let t='';
  40. 40 export default {
  41. 41 name: "Search",
  42. 42 data() {
  43. 43 return {
  44. 44 placeholderStr: '搜一搜你想找的TA',
  45. 45 keyword: '',
  46. 46 list: [],
  47. 47 timerKey: null,
  48. 48 dataList:[],//列表数据
  49. 49 totalPage:1,
  50. 50 popuShow:false,//协议弹出层
  51. 51 isScale:false,//比例弹出层
  52. 52 scaleValue:'',//分成比例
  53. 53 userId:'',
  54. 54 isActive:true,//操作协议按钮灰色显示
  55. 55 sencond:5,//秒数
  56. 56 btntxt:'', //操作协议层按钮文字显示
  57. 57 scaleValue:'',//分成比例
  58. 58 scaleDesc:'',//比例弹窗描述
  59. 59 scaleBtn:'',
  60. 60 scaleCount:'50%',//默认分成比例
  61. 61 successInvite: [],//默认未邀请
  62. 62 protocolTitle:'',//协议标题
  63. 63 protocolCon:'' //协议内容
  64. 64 };
  65. 65 },
  66. 66 components:{FastChoice,PopUp,scale, SearchContent},
  67. 67 watch: {
  68. 68 keyword () {
  69. 69 if (!this.keyword){
  70. 70 return;
  71. 71 }
  72. 72 }
  73. 73 },
  74. 74 mounted() {
  75. 75 this.protocolAjax();
  76. 76 },
  77. 77 methods: {
  78. 78 //邀请
  79. 79 inviteClick (item) {
  80. 80 //点击邀请过的不予操作
  81. 81 if(this.successInvite.indexOf(item.hwUserId) > -1 || item.inviteStatus){
  82. 82 return;
  83. 83 }
  84. 84 this.isScale = true;
  85. 85 this.userId = item.hwUserId;
  86. 86 this.scaleDesc = '邀请成功后你可获取该用户部分收益,选择双方都认可的分成比例可以提高邀请成功率哦~';
  87. 87 this.scaleBtn = '发送邀请';
  88. 88 this.scaleCount = '50%';//邀请比例统一为50%
  89. 89 },
  90. 90 //点击发送邀请
  91. 91 sendAjaxClick (value){
  92. 92 this.scaleValue = value;
  93. 93 this.popuShow = true;
  94. 94 this.isScale = false;
  95. 95 this.isActive = true;
  96. 96 this.sencond = 5 ;
  97. 97 this.timer();
  98. 98 },
  99. 99 //5s时间倒计时
  100. 100 timer() {
  101. 101 if (this.sencond > 0) {
  102. 102 this.btntxt="已阅读同意并确认邀请("+this.sencond+"s)";
  103. 103 this.sencond--;
  104. 104 t=setTimeout(this.timer, 1000);
  105. 105 } else{
  106. 106 this.isActive = false;
  107. 107 this.sencond = 5;
  108. 108 this.btntxt="已阅读同意并确认邀请";
  109. 109 }
  110. 110 },
  111. 111 //已阅读同意并确认
  112. 112 confirmProtocol () {
  113. 113 if(this.isActive){
  114. 114 return false;
  115. 115 }
  116. 116 this.sendAjax();
  117. 117 },
  118. 118 //发送邀请请求
  119. 119 sendAjax () {
  120. 120 console.log(this.scaleValue);
  121. 121 let dd = this.scaleValue.toString();
  122. 122 this.$request.post(_basePath + '/activity/page20191018/inviteArtist.html',{userId: this.userId,shareRate:this.scaleValue}).then((res) => {
  123. 123 this.successInvite.push(this.userId) ;
  124. 124 mui.toast("已发送邀请,对方接受后会通知你哦",2000);
  125. 125 this.closeActionClick();
  126. 126 }).catch(() => {})
  127. 127 },
  128. 128 //关闭操作协议弹窗
  129. 129 closeActionClick() {
  130. 130 this.popuShow = false;
  131. 131 clearTimeout(t);//清除倒计时
  132. 132 },
  133. 133 //关闭分成比例弹窗
  134. 134 closeScale () {
  135. 135 this.isScale = false;
  136. 136 },
  137. 137 clear () {
  138. 138 this.keyword = "";
  139. 139 this.$refs["input"].focus();
  140. 140 },
  141. 141 protocolAjax () {
  142. 142 this.$request.post(_basePath + '/activity/page20191018/queryProtocol.html',{type:0}).then((res) => {
  143. 143 this.protocolTitle = res.title;
  144. 144 this.protocolCon = res.content;
  145. 145 }).catch(() => {})
  146. 146 }
  147. 147 },
  148. 148 };
  149. 149 </script>
  150. 150
  151. 151 <style lang="scss" scoped>
  152. 152 @import "search";
  153. 153 </style>
View Code
  1. 子组件处理:
  1. 1 <template>
  2. 2 <div>
  3. 3 <div ref="mescroll" class="mescroll">
  4. 4 <div class="search-content wrapper" ref="scroller" >
  5. 5 <ul>
  6. 6 <li class="item" v-for="(item,index) in dataList" :key="index">
  7. 7 <div class="personBlock" @click="openUserClick(item.userDetail.userId)">
  8. 8 <div class="showImg">
  9. 9 <img :src="item.userDetail.userThumUrl" />
  10. 10 <template v-if="item.userDetail.kolFlag">
  11. 11 <em v-if="item.userDetail.kolFlag" class="icon c_kol"></em>
  12. 12 </template>
  13. 13 <template v-else>
  14. 14 <em class="icon c_company" v-if="item.userDetail.upSignType == '1'"></em>
  15. 15 <em class="icon c_person" v-if="item.userDetail.upSignType == '0'"></em>
  16. 16 </template>
  17. 17
  18. 18 </div>
  19. 19 <div class="showInfo">
  20. 20 <div class="name">{{item.userDetail.nickName}}</div>
  21. 21 <div class="attentionCount">
  22. 22 {{item.userDetail.fansCount || 0}}人关注TA
  23. 23 </div>
  24. 24 </div>
  25. 25 </div>
  26. 26 <div class="sendBtn" :class="{active:item.userDetail.inviteStatus || (successInvite.indexOf(item.userDetail.hwUserId) > -1 ) }" @click="inviteClick(item.userDetail)">
  27. 27 <span v-if="item.userDetail.inviteStatus || successInvite.indexOf(item.userDetail.hwUserId) > -1">已邀请</span>
  28. 28 <span v-else>邀请</span>
  29. 29 </div>
  30. 30 </li>
  31. 31 </ul>
  32. 32
  33. 33 </div>
  34. 34 </div>
  35. 35 <empty v-show="isEmpty">
  36. 36 <p class="note">纳尼,竟然找不到这个人…</p>
  37. 37 </empty>
  38. 38 </div>
  39. 39 </template>
  40. 40
  41. 41 <script>
  42. 42 import MeScroll from 'mescroll.js';
  43. 43 import 'mescroll.js/mescroll.min.css';
  44. 44 import Empty from './empty';
  45. 45 const pageSize=10;
  46. 46 export default {
  47. 47 name: 'SearchContent',
  48. 48 props: {
  49. 49 searchName: {
  50. 50 type: String,
  51. 51 default: ''
  52. 52 },
  53. 53 successInvite: {
  54. 54 type: Array,
  55. 55 default: []
  56. 56 }
  57. 57 },
  58. 58 data() {
  59. 59 return {
  60. 60 dataList: [],
  61. 61 mescroll: null, //mescroll实例对象
  62. 62 totalPage:1,
  63. 63 isEmpty:false
  64. 64 }
  65. 65 },
  66. 66 components:{
  67. 67 Empty
  68. 68 },
  69. 69 watch: {
  70. 70 'searchName' () {
  71. 71 this.dataList = [];//要清空,不然有时候会出现上拉加载不了
  72. 72 this.searchName !== '' && this.mescroll.resetUpScroll();
  73. 73 }
  74. 74 },
  75. 75 mounted () {
  76. 76 console.log(this.searchName)
  77. 77 this.mescroll = new MeScroll(this.$refs.mescroll, { //在mounted初始化mescroll,确保此处配置的ref有值
  78. 78 down:{isLock: true}, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则down可不用写了)
  79. 79 up: {
  80. 80 callback: this.upCallback,
  81. 81 // 以下是一些常用的配置,当然不写也可以的.
  82. 82 page: {
  83. 83 num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
  84. 84 size: 10, //每页数据条数,默认10
  85. 85 },
  86. 86 htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">正在加载中..</p>',
  87. 87 htmlNodata: '<p class="upwarp-nodata" style="height:.4rem">当当当~已经到底啦~</p>',
  88. 88 noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
  89. 89 isBounce: true,
  90. 90 },
  91. 91 down:{
  92. 92 use:false
  93. 93 },
  94. 94 });
  95. 95 },
  96. 96 methods: {
  97. 97 //点击调起个人主页
  98. 98 openUserClick (item) {
  99. 99 console.log(item)
  100. 100 var userId = item;
  101. 101 mui.openClient({"pageType": "userHome","userId":item});
  102. 102 },
  103. 103 //上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
  104. 104 upCallback(page) {
  105. 105 //联网请求
  106. 106 this.$request.post(_basePath + '/activity/page20191018/searchAll.html', {hintKey:this.searchName,searchType:91,pageNo:page.num,pageSize:page.size,actionSource:'07'}).then((response) => {
  107. 107 if(response && response.resultList){
  108. 108 // 请求的列表数据
  109. 109 let result = response.resultList[0];
  110. 110 let arr = result.list;
  111. 111 // 如果是第一页需手动置空列表
  112. 112 if (page.num === 1) this.dataList = []
  113. 113 // 把请求到的数据添加到列表
  114. 114 this.dataList = this.dataList.concat(arr)
  115. 115 // 数据渲染成功后,隐藏下拉刷新的状态
  116. 116 this.totalPage = result.total % pageSize > 0 ? Math.floor(result.total / 10 + 1) : result.total / 10;//计算总页数超过就不loadMore
  117. 117 this.$nextTick(() => {
  118. 118 this.mescroll.endSuccess(arr.length);
  119. 119 this.mescroll.endByPage(arr.length, this.totalPage)
  120. 120 })
  121. 121 }else{
  122. 122 this.isEmpty = true;
  123. 123 this.mescroll.endErr();
  124. 124 }
  125. 125 }).catch(() => {
  126. 126 this.mescroll.endErr();
  127. 127 })
  128. 128 },
  129. 129 inviteClick(item) {
  130. 130 this.$emit('inviteClick',item);
  131. 131 }
  132. 132 }
  133. 133
  134. 134 }
  135. 135 </script>
  136. 136
  137. 137 <style lang="scss" scoped>
  138. 138 .mescroll {
  139. 139 position: fixed;
  140. 140 top: .9rem;
  141. 141 bottom: 0;
  142. 142 left:0;
  143. 143 height: auto;
  144. 144 }
  145. 145 .search-content{
  146. 146 padding:0 .24rem;
  147. 147 background: #121223;
  148. 148 ul{
  149. 149 height:auto;
  150. 150 .item{
  151. 151 display:flex;
  152. 152 justify-content:space-between;
  153. 153 align-items:center;
  154. 154 width:100%;
  155. 155 height:1.56rem;
  156. 156 .personBlock{
  157. 157 display:flex;
  158. 158 justify-content: flex-start;
  159. 159 align-items: center;
  160. 160 .showImg{
  161. 161 position:relative;
  162. 162 width:1rem;
  163. 163 height:1rem;
  164. 164 margin-right:.16rem;
  165. 165 border:.02rem solid #51516D;
  166. 166 border-radius:50%;
  167. 167 box-sizing: border-box;
  168. 168 img{width:100%;height:100%;border-radius:50%}
  169. 169 .icon{
  170. 170 position: absolute;
  171. 171 bottom:0;
  172. 172 right:0;
  173. 173 width:.28rem;
  174. 174 height:.28rem;
  175. 175 background-image:url();
  176. 176 background-repeat:no-repeat;
  177. 177 background-size:contain;
  178. 178 &.c_company{background-image:url(../../images/c_company.png);}
  179. 179 &.c_person{background-image:url(../../images/c_person.png);}
  180. 180 &.c_kol{background-image:url(../../images/kol.png);}
  181. 181 }
  182. 182 }
  183. 183 .showInfo{
  184. 184 .name{font-size:.3rem;color:#fff;font-weight:500;line-height:.42rem;text-align:left;}
  185. 185 .attentionCount{font-size:.26rem;font-weight:400;color:#716D80;text-align:left;}
  186. 186 }
  187. 187 }
  188. 188
  189. 189 .sendBtn{
  190. 190 width:1.44rem;
  191. 191 height:.56rem;
  192. 192 line-height:.56rem;
  193. 193 background:#FF005E;
  194. 194 border-radius:.28rem;
  195. 195 color:#fff;
  196. 196 text-align:center;
  197. 197 &.active{background:#2C2B41;color:#fff}
  198. 198 }
  199. 199 }
  200. 200 }
  201. 201 }
  202. 202
  203. 203 </style>
View Code

 

  1. 填坑处理:
    1、用户未输入搜索关键词时,mescroll不能就直接初始话,要在用户输入的时候才能初始化,所以子组件就接受了父组件的keyword,并用
v-if="keyword !== ''"来判断加载子组件的条件,然后子组件通过监听keyword的变化,重置mescroll:如下:
  1. watch: {
  2. 'searchName' () {
  3. this.dataList = [];//要清空,不然有时候会出现上拉加载不了
  4. this.searchName !== '' && this.mescroll.resetUpScroll();
  5. }
  6. },

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




 

原文链接:http://www.cnblogs.com/huanghuamei206023/p/11760999.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号