微信小程序仿通讯录功能


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技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 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初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
PHP时间处理类操作示例
2018/09/05 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
详解Python中for循环的使用方法
2015/05/14 Python
Python Cookie 读取和保存方法
2018/12/28 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
护士演讲稿范文
2014/01/05 职场文书
养殖项目策划书范文
2014/01/13 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
班主任高考寄语
2015/02/26 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript
PHP RabbitMQ消息列队
2022/05/11 PHP
JS高级程序设计之class继承重点详解
2022/07/07 Javascript