微信公众号开发--h5定位索引列表

你的名字 2023-05-29 13:03 25阅读 0赞

直接看效果吧
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191106110645968.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODY0MzIw,size_16,color_FFFFFF,t_70)
    
    html就不用写了哇，直接看看图片
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191106110841868.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODY0MzIw,size_16,color_FFFFFF,t_70)

window.οnlοad=function()\{

// //初始化加载  
// $(function() \{  
// //调用数据方法  
// getareainfo();  
// \});  
//获取 汉字首字母  
// pinyin.getFullChars(this.value); //翻译出每个字的首字母  
//pinyin.getCamelChars(this.value);

//滚动div
    		var cityWrapper = document.querySelector('.city-wrapper-hook');
    		//滚动div
    		var cityScroller = document.querySelector('.scroller-hook');
    		//列表城市city
    		//***这些数据都是我本地存储的json数据，可能需要根据你们自己的配置去修改***
    		var cities = document.querySelector('.cities-hook');
    		var localcityCode = localStorage.getItem('cityCode'); //当前定位
    		var localcityName = localStorage.getItem('city')
    		var cityName;//选中
    		var cityCode; //选中

//声明一个变量接收 scroll  
var scroll;

var shortcutList = [];
    		//列表首字母数据
    		var anchorMap = {};
    		//屏幕右边字母检索触摸
    		var shortcut = document.querySelector('.shortcut-hook');
    			var y = 0;
    			//标题字母高度
    			var titleHeight = 28;
    			//列表高度
    			var itemHeight = 44;
    			//list列表
    			var lists = '';
    			//ul标签
    			var en = '<ul>';
    			//声明变量城市
    			var city;
    			//城市数据
    			//城市检索的首字母
    			var searchLetter = ["*", "A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"]
    		
    			  // var cityObj = [];
    			  var localObj = JSON.parse(localStorage.getItem('localtion'));
    			  var cityObj = JSON.parse(localStorage.getItem('localtion'));
    			  console.log('位置:',localObj)
    	
    			
    
    			//对城市信息进行分组
    
    			var tempObj = [];
    			for(var i = 0; i < searchLetter.length; i++) {
    				var initial = searchLetter[i];
    				var cityInfo = [];
    				var tempArr = {};
    				tempArr.initial = initial;
    				for(var j = 0; j < cityObj.length; j++) {
    					for (var x = 0; x<cityObj[j].child.length;x++ ){
    						if(initial == cityObj[j].child[x].pinyin[0].toUpperCase()) {
    							cityInfo.push(cityObj[j].child[x]);
    						}
    					}
    					
    				}
    				tempArr.cityInfo = cityInfo;
    				tempObj.push(tempArr);
    			}
    
    			var data = tempObj;
    			console.log("data", data);
    			console.log("data", data.length);
    			if(data != null && data.length > 0) {
    				lists += '<div class="title">当前已选站点</div>';
    				lists += '<div class="nowLocal"><span class="nowLocal-title" data-id="'+localcityCode+'" data-name="'+localcityName+'">'+localcityName+'</span></div>';
    				lists += '<div class="title">热门站点</div>';
    				lists += '<div class="nowLocal"><span class="host-title" data-id="565349" data-name="成都市">成都市</span></div>';
    				for(var i = 0; i < data.length; i++) {
    					
    					lists += '<div class="title" >' + data[i].initial + '</div>';
    					lists += '<ul>';
    					for(var j = 0; j < data[i].cityInfo.length; j++) {
    						lists +='<li></li>'
    						lists += '<li class="item bg-white" data-name="' + data[i].cityInfo[j].name + '" data-id="' + data[i].cityInfo[j].id + '"><span class="border-1px name" data-id="' + data[i].cityInfo[j].id + '" data-name="' + data[i].cityInfo[j].name + '">' + data[i].cityInfo[j].name + '</span></li>';
    					}
    					lists += '</ul>';
    					var name = data[i].initial.substr(0, 1);
    					en += '<li data-anchor="' + name + '" class="item">' + name + '</li>';
    					var len = data[i].cityInfo.length;
    					anchorMap[name] = y;
    					y -= titleHeight + len * itemHeight;
    				}
    				en += '</ul>';
    				cities.innerHTML = lists;
    				shortcut.innerHTML = en;
    				shortcut.style.top = (cityWrapper.clientHeight - shortcut.clientHeight) / 2 + 'px';
    
    				scroll = new window.BScroll(cityWrapper, {
    					probeType: 3
    				});
    				scroll.scrollTo(0, 0);
    			}
    
    			var touch = {};
    			var firstTouch;
    			//滑动开始
    			shortcut.addEventListener('touchstart', function(e) {
    				var anchor = e.target.getAttribute('data-anchor');
    				firstTouch = e.touches[0];
    				touch.y1 = firstTouch.pageY;
    				touch.anchor = anchor;
    				$("#showLetter span").html(anchor);
    				$("#showLetter").show().delay(500).hide(0);
    				console.log("211");
    				      navigator.vibrate = navigator.vibrate
               || navigator.webkitVibrate
               || navigator.mozVibrate
               || navigator.msVibrate;
    
       if (navigator.vibrate) {
           // 支持
           console.log("支持设备震动！");
       }
    
         navigator.vibrate([500, 300, 400,300]);
    
    
    				scrollTo(anchor);
    			});
               //当前
    		  //  $('.city').on('click','.nowLocal-title',function(){
    			 //   city = $(this).attr('data-name');
    			 //   console.log()
    		  //  })
    			 
    		   
    			//获取当前选中city
    			cities.addEventListener('click', function(e) {
    				console.log('点击:',e)
    				city = e.target.getAttribute('data-name');
    				cityCode = e.target.getAttribute('data-id');
    				localStorage.setItem('cityCode',cityCode);//每次点击，保存当前点击的code;
    				localStorage.setItem('city',city);//每次点击，保存当前点击的code;
    				window.location = 'publicIndex.html';//
    				console.log("当前选中----" + city,cityCode);
    			});
    
    			//右边字母检索滑动结束
    			shortcut.addEventListener('touchmove', function(e) {

// console.log(“111”);  
firstTouch = e.touches\[0\];  
touch.y2 = firstTouch.pageY;  
var anchorHeight = 16;  
var delta = (touch.y2 - touch.y1) / anchorHeight | 0;  
var anchor = shortcutList\[shortcutList.indexOf(touch.anchor) + delta\];  
scrollTo(anchor);  
e.preventDefault();  
e.stopPropagation();  
\});

//滚动事件
    			function scrollTo(anchor) {
    				var maxScrollY = cityWrapper.clientHeight - cityScroller.clientHeight + 100;
    				var y = Math.min(0, Math.max(maxScrollY, anchorMap[anchor]));
    				if(typeof y !== 'undefined') {
    					scroll.scrollTo(0, y);
    				}
    			}
    	
    	
    	
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关微信公众号使用H5获取地理位置信息并定位

该定位功能是使用百度地图的API实现的。首先需要在百度地图的开发平台中申请一个AK码。然后再html中引入百度地图API <script src="http:

深碍√TFBOYSˉ_/ 2023年10月17日 22:12/ 0 赞/ 68 阅读

相关微信公众号开发--h5定位索引列表

直接看效果吧 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191106110645968.png?x-oss-proc

你的名字/ 2023年05月29日 13:03/ 0 赞/ 26 阅读

相关微信公众号h5支付功能

首先要配置参数：jsApiList：\["chooseWXPay"\] // 获取微信配置 function getconfig(){

左手的ㄟ右手/ 2022年11月26日 15:59/ 0 赞/ 303 阅读

相关微信公众号---微信公众号跳H5，H5网页授权获取用户信息

需求描述：在微信公众号中，跳转到第三方H5网站，第三方H5网站可以获取微信用户信息。官方API: [微信公众号网页授权][Link 1

电玩女神/ 2022年09月09日 06:03/ 0 赞/ 388 阅读

相关微信公众号开发

-------------------- 微信公共号入门微信公众号概述: 是微信平台推出的一个面向企业和面向个人的一个服务平台作用：主要是推

爱被打了一巴掌/ 2022年04月11日 10:21/ 0 赞/ 572 阅读

相关 vue微信公众号、H5微信支付

1.H5微信支付后台会返回一个URL，前端直接跳转就OK(需要你传给后台一个ip,必须保证在同一域名下) 使用window.location.href =res.data

我会带着你远行/ 2021年11月26日 22:44/ 0 赞/ 684 阅读

相关 H5开发微信公众号

利用H5开发微信公众号一、首先授权配置公众号设置 --》功能设置设置业务域名! ![自定义菜单][SouthEast] 这里的MP\_ve

梦里梦外;/ 2021年09月16日 02:08/ 0 赞/ 834 阅读

相关微信公众号H5 - 使用vue开发微信公众号网页

应项目需求，最近我开始了我的第一次微信公众号网页的开发，第一次接触到公众号网页的我是很懵逼的。通过了解并实现了需求的我下面来进行讲解一下，希望可以帮助到有需要的朋友。ps：

小鱼儿/ 2021年09月07日 06:12/ 0 赞/ 946 阅读

相关微信公众号H5 - 关于微信公众号h5网页实现分享图片

近期，因为产品需求，要在公众号上面实现分享图片的功能，后面发现用了weixin-js-sdk方法分享出来的图片是一个链接的形式分享的。如下图：我要的效果图： ![

怼烎@/ 2021年09月07日 06:03/ 0 赞/ 866 阅读

相关微信公众号授权H5页面

一、为何通过微信公众号授权官方: 如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑

曾经终败给现在/ 2021年09月03日 03:00/ 0 赞/ 861 阅读