【移動應(yīng)用開發(fā)技術(shù)】小程序仿美團城市選擇的實現(xiàn)示例

這篇文章將為大家詳細講解有關(guān)小程序仿美團城市選擇的實現(xiàn)示例，在下覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。具體內(nèi)容如下代碼很簡單.var

city

=

require('../../utils/city.js');

var

app

=

getApp()

Page({

data:

{

searchLetter:

[],

showLetter:

"",

winHeight:

0,

//

tHeight:

0,

//

bHeight:

0,

cityList:

[],

isShowLetter:

false,

scrollTop:

0,//置頂高度

scrollTopId:

'',//置頂id

city:

"上海市",

hotcityList:

[{

cityCode:

110000,

city:

'北京市'

},

{

cityCode:

310000,

city:

'上海市'

},

{

cityCode:

440100,

city:

'廣州市'

},

{

cityCode:

440300,

city:

'深圳市'

},

{

cityCode:

330100,

city:

'杭州市'

},

{

cityCode:

320100,

city:

'南京市'

},

{

cityCode:

420100,

city:

'武漢市'

},

{

cityCode:

410100,

city:

'鄭州市'

},

{

cityCode:

120000,

city:

'天津市'

},

{

cityCode:

610100,

city:

'西安市'

},

{

cityCode:

510100,

city:

'成都市'

},

{

cityCode:

500000,

city:

'重慶市'

}]

},

onLoad:

function

()

{

//

生命周期函數(shù)--監(jiān)聽頁面加載

var

searchLetter

=

city.searchLetter;

var

cityList

=

city.cityList();

var

sysInfo

=

wx.getSystemInfoSync();

var

winHeight

=

sysInfo.windowHeight;

var

itemH

=

winHeight

/

searchLetter.length;

var

tempObj

=

[];

for

(var

i

=

0;

i

<

searchLetter.length;

i++)

{

var

temp

=

{};

=

searchLetter[i];

temp.tHeight

=

i

*

itemH;

temp.bHeight

=

(i

+

1)

*

itemH;

tempObj.push(temp)

}

this.setData({

winHeight:

winHeight,

itemH:

itemH,

searchLetter:

tempObj,

cityList:

cityList

})

},

onReady:

function

()

{

//

生命周期函數(shù)--監(jiān)聽頁面初次渲染完成

},

onShow:

function

()

{

//

生命周期函數(shù)--監(jiān)聽頁面顯示

},

onHide:

function

()

{

//

生命周期函數(shù)--監(jiān)聽頁面隱藏

},

onUnload:

function

()

{

//

生命周期函數(shù)--監(jiān)聽頁面卸載

},

onPullDownRefresh:

function

()

{

//

頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作

},

onReachBottom:

function

()

{

//

頁面上拉觸底事件的處理函數(shù)

},

clickLetter:

function

(e)

{

console.log(e.currentTarget.dataset.letter)

var

showLetter

=

e.currentTarget.dataset.letter;

this.setData({

showLetter:

showLetter,

isShowLetter:

true,

scrollTopId:

showLetter,

})

var

that

=

this;

setTimeout(function

()

{

that.setData({

isShowLetter:

false

})

},

1000)

},

//選擇城市

bindCity:

function

(e)

{

console.log("bindCity")

this.setData({

city:

e.currentTarget.dataset.city

})

},

//選擇熱門城市

bindHotCity:

function

(e)

{

console.log("bindHotCity")

this.setData({

city:

e.currentTarget.dataset.city

})

},

//點擊熱門城市回到頂部

hotCity:

function

()

{

this.s