小程序城市列表实现

小程序城市列表实现

小程序城市列表实现

实现城市列表选择

准备地址数据

citydata.js

创建city页面

引入创建的citydata.js

import citydata from "./citydata.js";

在初始化数据中创建city参数并赋值citydata中的数据

js

/*** 组件的初始数据*/data: {city:citydata.city},/*** 方法列表*/scroll: function (e) {var id = e.target.dataset.key;wx.pageScrollTo({selector: "#" + id})console.log(e.target.dataset.key);},

wxml

<view class="city"><view class="city-name"><view wx:for="{{city}}" wx:key="{{this}}"><view id="{{item.title}}" class="title">{{item.title}}</view><view wx:for="{{item.lists}}" wx:key="{{this}}" data-city="{{item}}" bindtap="sendcity">{{item}}</view></view></view><view class="city-menu"><view wx:for="{{city}}" data-key="{{item.title}}" wx:key="{{index}}" bindtap="scroll">{{item.title}}</view></view>
</view>

wxss

/* pages/city/city.wxss */
.city{display: flex;justify-content: space-between;
}
.city-name{width: 500rpx;
}
.city-menu{width: 40rpx;height: 1000rpx;background: gainsboro;border-radius: 5px;font-size: 30rpx;position: fixed;top: 100rpx;right: 0;
}
.city-menu view{margin: 10rpx 10rpx;
}

这样一个简单的城市列表就实现了