微信小程序自定义组件-城市选择「建议收藏」

微信小程序自定义组件-城市选择「建议收藏」微信小程序自定义组件-城市选择

大家好,又见面了,我是你们的朋友全栈君。

上篇文章有介绍一些小程序的自定义组件语法,这篇文章就不多做赘述,重点介绍组件的实现逻辑。

先把效果图贴出来,看看要实现的效果:

首先还是设置布局,从实现效果看,组件可分成三个部分:展示城市数据的二级列表、侧边的滑动栏以及中间的提示框。也就是一个scroll-view,一个view布局以及一个text。最终确定的wxml布局文件如下:

<scroll-view class='cityList' scroll-y scroll-into-view='{ 
    {currentIndex}}' scroll-top='{ 
    {scrollTop}}'>
     <view wx:for='{ 
    {allCities}}'>
          <view class='letter-class' id="id{ 
    {index}}">{
   
   {item.letter}}</view>
          <view class='item-class' wx:for='{ 
    {item.cityList}}' wx:for-item='cityItem' bindtap='citySelectEvent' data-city='{ 
    {cityItem.name}}' data-letter='{ 
    {cityItem.key}}'>{
   
   {cityItem.name}}</view>
     </view>
</scroll-view>

<view class='citySlide' catchtouchstart='slideStart' catchtouchmove='slideMove' catchtouchend='slideEnd'>
     <view class='citySlideItem' wx:for='{ 
    {allCities}}' data-index='{ 
    {index}}'>{
   
   {item.letter}}</view>
</view>

<text class='letterText' hidden='{ 
    {isLetterHidden}}' style='top:{ 
    {letterTop}}px;left:{ 
    {letterLeft}}px'>{
   
   {letterText}}</text>
复制代码

布局文件有了,我们就需要考虑该如何实现侧边栏与二级列表的联动效果了。这里我利用的是scroll-view的scroll-into-view属性,这个属性能让scroll-view滑动到对应id的view的位置,很符合我们的需求。

这里我们为列表的第一级布局view设置id,并为scroll-view设置scroll-into-view属性

<scroll-view class='cityList' scroll-y scroll-into-view='{ 
    {currentIndex}}' scroll-top='{ 
    {scrollTop}}'>
    .
    .
    .
//id不能以数字开头
<view class='letter-class' id="id{ 
    {index}}">{
   
   {item.letter}}</view>
复制代码

然后在.js中的data中初始化currentIndex为’id0′

/**
      * 组件的初始数据
      */
     data: {
          currentIndex: 'id0'
     }
复制代码

现在的问题就是如何计算出手指在侧边栏上触摸的是第几个letter,然后通过改变currentIndex的值,使scroll-view滑动到指定位置来达到联动的效果。

下面说下思路

首先确认侧边栏的高度,我是以屏幕高度减去80px作为侧边栏高度,在.wxss文件中通过样式设置。

.citySlide {
     display: flex;
     flex-direction: column;
     width: 60rpx;
     height: calc(100% - 80px);
     position: absolute;
     top: 40px;
     right: 16rpx;
     align-items: center;
     justify-content: center;
     background-color: #ccc;
     opacity: 0.6;
}
复制代码

然后在.js中通过把屏幕高度减去80px计算出侧边栏的具体高度。再除以数据源的一级数据数组长度,计算出每个letter的高度。

          wx.getSystemInfo({
               success: function (res) {
                    letterLineHeight = (res.windowHeight - 80) / that.data.allCities.length;
                    that.setData({
                         letterTop: res.windowHeight / 2 - 30,
                         letterLeft: res.windowWidth / 2 - 30
                    });
               }
          })
复制代码

计算出每个letter的高度后,我们就可以在侧边栏的触摸监听事件中,通过触摸的点的坐标位置,来计算出当前触摸的letter的序号index,然后再动态修改currentIndex的值为(‘id’+index)。就可以达到联动的效果了。

显示在屏幕中央的提示框的实现则比较简单,通过一个变量isLetterHidden控制text的显示与隐藏就可以轻松实现。

slideStart: function (e) {
   //手指触摸的y坐标值
   var touchY = e.touches[0].clientY;
   //布局距离屏幕顶端距离
   var offsetTop = e.currentTarget.offsetTop;
   var index = parseInt((touchY - offsetTop) / letterLineHeight);
   this.setData({
		currentIndex: 'id' + index,
		isLetterHidden: false,
		letterText: this.data.allCities[index].letter
   });
},

slideMove: function (e) {
   var touchY = e.touches[0].clientY;
   var offsetTop = e.currentTarget.offsetTop;
   var index = parseInt((touchY - offsetTop) / letterLineHeight);
   this.setData({
		currentIndex: 'id' + index,
		isLetterHidden: false,
		letterText: this.data.allCities[index].letter
   });
},

slideEnd: function (e) {
   var that = this;
   wx: setTimeout(function () {
		that.setData({
			 isLetterHidden: true
		});
   }, 200);
}
复制代码

这里有一点要注意,设置侧边栏触摸事件的时候,要选择catchtouchxxxx事件,不能使用bindtouchxxxx,因为bind事件不会阻止事件冒泡,这样手指在侧边栏滑动时,会影响到下方的列表的滑动,而catch事件阻止了事件冒泡,就不会出现滑动影响的问题。

再说下城市的数据源格式要求,要求是一个二维数组,然后子项要有name和key两个字段,分别代表城市名和类别letter。

项目GitHub地址:github.com/RaoMeng/Tem…

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107155.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • python后端框架有哪些_后端框架有哪些?五款优秀的web开源后端框架推荐

    python后端框架有哪些_后端框架有哪些?五款优秀的web开源后端框架推荐作为一个web开发人员,下面五款优秀的开源框架一定要了解一下。PHP篇作为全球最好的web开发编程语言,PHP的框架非常多。下面重点介绍2款:Laravelhttps://laravel.comLaravel最大的优势就是:简洁和优雅。能迅速的让大家从杂乱无章的代码中解脱出来。拥抱PHP7基于composer全栈型框架灵活的路由配置仅仅通过配置文件就可以切换缓存、会话的存储介质,包括(file、r…

  • 一个Python小白5个小时爬虫经历

    一个Python小白5个小时爬虫经历前言最近业余在做一个基于.NETCore的搜索项目,奈何基层代码写好了,没有看起来很华丽的数据供测试。很巧的也是博客搜索,于是乎想到了博客园。C#也能做做页面数据抓取的,不过在博客园看到的大部分都

  • dijkstra算法求最短路_图论的最短路问题

    dijkstra算法求最短路_图论的最短路问题原题链接战争中保持各个城市间的连通性非常重要。本题要求你编写一个报警程序,当失去一个城市导致国家被分裂为多个无法连通的区域时,就发出红色警报。注意:若该国本来就不完全连通,是分裂的k个区域,而失去一个城市并不改变其他城市之间的连通性,则不要发出警报。输入格式:输入在第一行给出两个整数N(0 < N ≤ 500)和M(≤ 5000),分别为城市个数(于是默认城市从0到N-1编号)和连接两城市的通路条数。随后M行,每行给出一条通路所连接的两个城市的编号,其间以1个空格分隔。在城市信息之后给出被攻占的

  • java数字取整(向上取整,向下取整,四舍五入)

    java数字取整(向上取整,向下取整,四舍五入)向上取整:Math.ceil(doublea)向下取整:Math.floor(doublea)四舍五入取整:Math.round(doublea)例:Math.ceil(24.2)–>25Math.floor(24.7)–>24Math.round(24.2)–>24Math.round(24.7)–>25

  • ~按位取反_按位取反什么意思

    ~按位取反_按位取反什么意思inta=0;intb=~a;System.out.println(b);  // -1计算方法:因为整形是32位有符号补码整数表示的。因此将整形转换为二进制后为:a 十进制0二进制00000000000000000000000000000000~a的二进制1111111111111111111111111

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号