index.wpy
<template>
<view class="cityBox">
<view class="cityHead">
<view>
<view class="nowLo">天津</view>
</view>
</view>
<view class="city_list">
<scroll-view scroll-y
class="scrollBox"
scroll-into-view="{{toView}}">
<view class="cityMain">
<p class="cityTitle">当下热门城市</p>
<ul class="mainUl">
<li wx:for="{{hotCity}}"
item="item"
wx:key="item"
data-city="{{item.city}}"
@tap="handleCity">
<text>{{item.city}}</text>
</li>
</ul>
<view class="mainCity"
wx:for="{{hotCities}}"
wx:key="this"
data-id="{{idx}}"
wx:for-index="idx"
wx:for-item="cityName">
<view class="mainLetter" data-city="{{idx}}">{{idx}}</view>
<view wx:for="{{cityName}}"
wx:key="item"
wx:for-item="item"
data-city="{{item.city}}"
@tap="handleCity"
class='mainName'>{{item.city}}</view>
</view>
</view>
</scroll-view>
<ol>
<li wx:for="{{hotCities}}"
wx:key="this"
wx:for-index="item"
data-index="{{item}}"
id="{{'main' + item}}"
class="{{currentIndex==item?'currentOn':''}}"
@tap="handleTop">
{{item}}
</li>
</ol>
</view>
</view>
</template>
<script>
const cityList = require('./cityList')
export default class cityList extends wepy.page {
data = {
hotCity: [{id:0,city: '天津'},{id:0,city: '北京'},{id:0,city: '上海'},{id:0,city: '深圳'},],
hotCities: {"A": [{
"A": [{
"city": "啊啊啊啊啊啊",
"groupName": "A"
},
{
"city": "啊",
"groupName": "A"
}]
}],},
currentIndex: 'A',
toView: '',
}
methods = {
handleTop (e) {
this.toView = e.currentTarget.dataset.index
wepy.showToast({
title: toView ,
icon: 'none'
})
},
handleCity (e) {
this.city = e.currentTarget.dataset.city;
}
}
}
</script>
<style lang="less">
// 去掉滚动条样式
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}