微信小程序仿通讯录功能


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 相关文章推荐
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 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
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
使用matplotlib画散点图的方法
2018/05/25 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
火山动力Java笔试题
2014/06/26 面试题
甲午大海战观后感
2015/06/02 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
话题作文之成长
2019/12/09 职场文书