JS implementation mobile phone according to the initial retrieval city list attachment

  • 的头像-Tumi
  • 36 day agopublish

Our common mobile phone address book or WeChat address book, contact information is a list of alphabetical sequence, by clicking on the letter, it will quickly locate the contacts corresponding to the first letter. Then I will introduce you today that it is the same as the first letter to the city list, the effects and address books.

JS实现移动端按首字母检索城市列表附源码下载

View Demo Download Source

Preparation

First We need to use urban data in the country, these urban data comes from the network, I have formatted data into JSON, everyone can take it directly.

We also need to use a rolling plug-in called better-scroll, which can help us handle the long page native scroll bar and optimize the scrolling effect.

Next we prepared the HTML structure.

  
.cities is used to load urban data list; .shortcut is used to load the first alpha list, and you need to use CSS to locate it on the right side.
JavaScript

Before writing JS code, load the city data CITY.JS and Better-Scroll.

 start writing JS, first define The variable:    VAR citywrapper = document.queryselector ('. City-wrapper-hook '); var cityScroller = document.querySelector (' scroller-hook. '); var cities = document.querySelector (' cities-hook. '); var shortcut = document.querySelector ('. shortcut-hook '); var Scroll; var shrnep = {= []; var achormap = {};   Function INITCIIES () loop traversed city data in city.js, extracts the city name, first Letters and ID information, one-time join to the data list. The BScroll plugin method is then called.  
Function INITCITIES () {var y = 0; var TitleHeight = 28; var temiHeight = 44; var lists = ”; var en = ‘

‘; CityData.Foreach (Function (Group) {var name = group.name; lists + = ‘

‘ + name + ‘
‘; lists + = ”; group.cities.Foreach (Function) ) {LISTS + = ‘
 ' + g.Name + ' 
‘;}; lists + = ”; var name = group.name.substr (0, 1); EN + = ‘
‘ + Name + ‘

‘; var len =Group.cities.length; Anchormap [Name] = Y; Y – = TitleHeight + Len * ItemHeight;}); En + = ‘

‘; cities.innerhtml = lists; shortcut.innerhtml = en; shortcut.style. TOP = (CityWrapper.ClientHeight – Shortcut.clientHeight) / 2 + ‘PX’; scroll = new window.bscroll (CityWrapper, {Probetype: 3 // 1), only one scroll event is sent when scrolling is over. 2 When the finger move, the scroll event will also be sent in real time. 3 In addition to sending a scroll event when the finger move, the list will have a long-distance scroll animation in Swipe (a small distance from the finger quickly), this list will have a long-distance scroll animation, this Scroll events will also be sent in real time during scrolling animation; Scroll.ScrollTo (0, 0);}
  
    then function bindevent () bind event, listening to right Side first letters of TouchStart and TouchMove events.
    • Function Bindevent () {var touch = {}; var numberttouch; shortcut.addeventListener ('touchstart', function (e) {var anchor = e.target.getattribute ('Data-Anchor'); firsttouch = e.touches [0];Touch.y1 = firstTouch.pagey; Touch.Anchor = Anchor; ScrollTo (Anchor);}; Shortcut.addeventListener ('TouchMove', Function (E) {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; var y = Math.min (0, Math.max (maxScrollY, anchorMap [anchor])); IF (TypeOf Y! == 'undefined') {scroll.scrollto (0, y);}}}
    • Last call to perform two functions.
  • Initcities (); BindEvent ();
Now uses mobile phone or tablet access.If you want to implement the video book effect, you can format the contact data information into the corresponding JSON in City.js.
The above is the JS of Xiaobian to introduce the JS to retrieve the city list according to the first alpha, I hope to help everyone. If you have any questions, please leave a message, the small package will reply to everyone. of. Thank you very much for your support of Tumi Cloud Website!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment