微信小程序仿通讯录功能


Posted in Javascript onApril 09, 2020

本文实例为大家分享了微信小程序实现通讯录功能的具体代码,供大家参考,具体内容如下

微信小程序模仿通讯录功能需要用到scroll-view标签

思路:首先需要获取到你所需要展示的数据样式的高度(这就需要用到微信给我们提供的一个API来完成了,因为小程序是没有DOM树结构的,这个可以去看我的前一篇里面有详细的记载怎么获取想要的元素的宽高。),然后组合成一个高度数组(便于后面根据这个数组进行判断),再获取滚动距离,用这两个比较判断之后就可以得出滚动的时候右边选中的字母了,然后再利用scroll-view标签的scroll-into-view属性来实现点击右侧导航字母,对应的左侧列表滚动到相应的位置。(每个人的想法不同,解法和理解也不太可能相同。所以,按自己的心走就好了),话不多说,上代码!

wxml

<view>
 <!-- 左侧列表内容部分 -->
 <scroll-view class="content" enable-back-to-top scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" bindscroll="onPageScroll">
 <view wx:for="{{listMain}}" wx:for-item="group" wx:key="{{group.id}}" id="{{ 'inToView'+group.id}}" data-id='{{group.id}}'>
  <view class="address_top">{{group.name}}</view>
  <view wx:for="{{group.list}}" wx:for-item="bdiet" wx:key="{{index}}">
  <navigator url='./wholeDetail?id={{bdiet.id}}' hover-class='none'>
   <view class="address_bottom" data-id='{{bdiet.id}}'>{{bdiet.wiki_name}}</view>
  </navigator>
  </view>
 </view>
 </scroll-view>
 <!-- 右侧字母导航 -->
 <view class="orientation_region">
 <view class="orientation">#</view>
 <block wx:for="{{listMain}}" wx:key="{{item.id}}">
  <view class="orientation_city {{isActive==item.id ? 'active':'' }}" bindtap="scrollToViewFn" data-id="{{item.id}}">
  {{item.name}}
  </view>
 </block>
 </view>
</view>

wxss

page {
 height: 100%;
}
 
.content {
 padding-bottom: 20rpx;
 box-sizing: border-box;
 height: 100%;
 position: fixed;
}
 
.location {
 width: 100%;
}
 
.location_top {
 height: 76rpx;
 line-height: 76rpx;
 background: #f4f4f4;
 color: #606660;
 font-size: 28rpx;
 padding: 0 20rpx;
}
 
.location_bottom {
 height: 140rpx;
 line-height: 140rpx;
 color: #d91f16;
 font-size: 28rpx;
 border-top: 1rpx #e5e5e5 solid;
 border-bottom: 1rpx #e5e5e5 solid;
 padding: 0 20rpx;
 align-items: center;
 display: -webkit-flex;
}
 
.address_top {
 height: 56rpx;
 line-height: 56rpx;
 background: #ebebeb;
 color: #384857;
 font-size: 28rpx;
 padding: 0 20rpx;
}
 
.address_bottom {
 height: 88rpx;
 line-height: 88rpx;
 background: #fff;
 color: #000;
 font-size: 28rpx;
 border-bottom: 1rpx #e5e5e5 solid;
 margin: 0 32rpx;
}
 
.location_img {
 width: 48rpx;
 height: 48rpx;
 position: absolute;
 right: 20rpx;
 top: 125rpx;
}
 
.add_city {
 width: 228rpx;
 height: 60rpx;
 line-height: 60rpx;
 text-align: center;
 border: 1rpx solid #e5e5e5;
 color: #000;
 margin-right: 20rpx;
}
 
.add_citying {
 width: 228rpx;
 height: 60rpx;
 line-height: 60rpx;
 text-align: center;
 border: 1rpx solid #09bb07;
 color: #09bb07;
 margin-right: 20rpx;
}
 
.orientation {
 white-space: normal;
 display: inline-block;
 width: 45rpx;
 height: 50rpx;
 font-size: 28rpx;
 font-weight: bold;
 color: rgb(88, 87, 87);
 text-align: center;
}
 
.orientation_region {
 padding: 5px 0px;
 width: 45rpx;
 font-size: 20rpx;
 position: fixed;
 top: 50%;
 right: 6rpx;
 transform: translate(0, -50%);
 background: rgb(199, 198, 198);
 border-radius: 10px;
}
 
.orientation_city {
 height: 40rpx;
 line-height: 40rpx;
 color: #000;
 text-align: center;
}
 
.active {
 color: #2cc1d1;
}
 
.list-fixed {
 position: fixed;
 width: 100%;
 z-index: 999;
 height: 56rpx;
 line-height: 56rpx;
 background: #ebebeb;
 color: #999;
 font-size: 28rpx;
 padding: 0 20rpx;
 z-index: 9999;
}
 
.fixed-title {
 color: #2cc1d1;
}

核心来了(JS逻辑)

Page({
 /** 
 * 页面的初始数据 
 */
 data: {
 isActive: null,
 listMain: [],
 toView: 'inToView0',
 oHeight: [],
 },
 //点击右侧字母导航定位触发
 scrollToViewFn: function (e) {
 var that = this;
 var _id = e.target.dataset.id;
 var scrollTop = that.data.scrollTop;
 console.log('点击获取Id', _id)
 console.log('点击获取滚动距离', scrollTop)
 for (var i = 0; i < that.data.oHeight.length; i++) {
  if (that.data.oHeight[i].key === _id) {
  that.setData({
   toView: 'inToView' + that.data.oHeight[i].key
  });
  break
  }
 }
 },
 // 页面滑动时触发
 onPageScroll: function (e) {
 var that = this;
 that.setData({
  scrollTop: e.detail.scrollTop
 })
 var scrollTop = that.data.scrollTop;
 console.log(scrollTop);
 for(var i =0; i< that.data.oHeight.length; i++){
  if (scrollTop >= 0 && scrollTop + 20 < that.data.oHeight[0].height){
  that.setData({
   isActive: that.data.oHeight[0].key
  });
  } else if (scrollTop + 20 <= that.data.oHeight[i].height) {
  that.setData({
   isActive: that.data.oHeight[i].key
  });
  return false;
  }
 }
 },
 // 处理数据格式,及获取分组高度
 getBrands: function () {
 var that = this;
 var url = config.DOMAIN_API.wikiWholeList,
  data = {};
 //发起get请求,使用方式如下:
 util.ajaxPost(url, data).then((res) => { //成功处理
  that.setData({
  listMain: res
  });
  var number = 0;
  for (let i = 0; i < that.data.listMain.length; i++) {
  wx.createSelectorQuery().select('#inToView' + that.data.listMain[i].id).boundingClientRect(function (rect) {
   number = rect.height + number;
   var newArry = [{ 'height': number, 'key': rect.dataset.id, "name": that.data.listMain[i].name }]
   that.setData({
   oHeight: that.data.oHeight.concat(newArry)
   })
  }).exec();
  };
 }).catch((errMsg) => { //错误处理,已统一处理,此处可以不需要
  console.log(errMsg);
 });
 
 },
 onLoad: function (options) {
 var that = this;
 wx.hideShareMenu()
 that.getBrands();
 },
})

以上就是做这个仿通讯录功能的所有步骤,和别的大同小异。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
js调用flash的效果代码
Apr 26 Javascript
Extjs 几个方法的讨论
Jan 28 Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
JavaScript随机排序(随即出牌)
Sep 17 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 #Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 #Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 #Javascript
加速vue组件渲染之性能优化
Apr 09 #Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 #Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 #Javascript
You might like
基于header的一些常用指令详解
2013/06/06 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
nodejs基础之多进程实例详解
2018/12/27 NodeJs
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
Python fileinput模块使用介绍
2014/11/30 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
python里运用私有属性和方法总结
2019/07/08 Python
详解Python中namedtuple的使用
2020/04/27 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
python3中确保枚举值代码分析
2020/12/02 Python
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
大学生实习证明范本
2014/01/15 职场文书
大学旷课检讨书
2014/01/28 职场文书
国际贸易求职信
2014/07/05 职场文书
销售团队获奖感言
2014/08/14 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
2014年后勤工作总结
2014/11/18 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
考试作弊检讨
2015/01/27 职场文书
个人工作年终总结
2015/03/09 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server