微信小程序仿通讯录功能


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 相关文章推荐
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
详解Vue的列表渲染
Nov 20 Vue.js
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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
机械专业毕业生自荐信
2013/11/02 职场文书
单位领导证婚词
2014/01/14 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
2015年度女工工作总结
2015/10/22 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
如何理解及使用Python闭包
2021/06/01 Python
vscode中使用npm安装babel的方法
2021/08/02 Javascript