没有合适的资源?快使用搜索试试~ 我知道了~
首页微信小程序实现顶部下拉菜单栏
微信小程序实现顶部下拉菜单栏
4 下载量 13 浏览量
更新于2023-03-03
评论 2
收藏 328KB PDF 举报
本文实例为大家分享了微信小程序实现下拉菜单栏的具体代码,供大家参考,具体内容如下 js代码 var cityData = require('../../utils/city.js'); Page({ data: { //选择的终点城市暂存数据 endselect: "", //终点缓存的五个城市 endcitys: [], //用户选择省份之后对应的城市和县城 endkeys: {}, //用户选择县城 town: [], //所有车长 commanders: cityData.getcommanders(), //所有车型 models: cityData.get
资源详情
资源评论
资源推荐
微信小程序实现顶部下拉菜单栏微信小程序实现顶部下拉菜单栏
本文实例为大家分享了微信小程序实现下拉菜单栏的具体代码,供大家参考,具体内容如下
js代码
var cityData = require('../../utils/city.js');
Page({
data: {
//选择的终点城市暂存数据
endselect: "",
//终点缓存的五个城市
endcitys: [],
//用户选择省份之后对应的城市和县城
endkeys: {},
//用户选择县城
town: [],
//所有车长
commanders: cityData.getcommanders(),
//所有车型
models: cityData.getmodels(),
//选中的车长
commander: "",
//选中的车型
model: "",
displaycity: 0,
city: "起点",
city1: "目的地",
//车型
model: "车长车型",
qyopen: false,
qyshow: true,
nzopen: false,
pxopen: false,
nzshow: true,
pxshow: true,
isfull: false,
cityleft: cityData.getCity(),
citycenter: {},
cityright: {},
select1: '',
select2: '',
select3: '',
shownavindex: ''
},
onLoad: function (options) {
var that = this
var province = ""
var city = ""
var demo = new QQMapWX({
key: '你的腾讯地图apikey' // 必填
});
//先进行一次最近的数据刷新
// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.userLocation" 这个 scope
wx.getSetting({
success(res) {
if (!res['scope.userLocation']) {
wx.authorize({
scope: 'scope.userLocation',
success() {
//获取地理位置
wx.getLocation({
type: 'wgs84',
success: function (res) {
console.log(res)
var latitude = res.latitude
var longitude = res.longitude
// 调用腾讯地图的接口查询当前位置
demo.reverseGeocoder({
location: {
latitude: latitude,
longitude: longitude
},
success: function (res) {
console.log(res)
province = res.result.address_component.province
city = res.result.address_component.city
that.setData({ city: city })
//获取数据更新页面
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
// console.log(res);
}
});
}
})
}
})
}
}
})
},
//选择起点
listqy: function (e) {
if (this.data.qyopen) {
this.setData({
qyopen: false,
nzopen: false,
pxopen: false,
nzshow: true,
pxshow: true,
qyshow: false,
isfull: false,
shownavindex: 0
})
} else {
this.setData({
qyopen: true,
pxopen: false,
nzopen: false,
nzshow: true,
pxshow: true,
qyshow: false,
isfull: true,
shownavindex: e.currentTarget.dataset.nav
})
}
},
//目的地选择终点
list: function (e) {
if (this.data.nzopen) {
this.setData({
nzopen: false,
pxopen: false,
qyopen: false,
nzshow: false,
pxshow: true,
qyshow: true,
isfull: false,
shownavindex: 0
})
} else {
this.setData({
content: this.data.nv,
nzopen: true,
pxopen: false,
qyopen: false,
nzshow: false,
pxshow: true,
qyshow: true,
isfull: true,
shownavindex: e.currentTarget.dataset.nav
})
}
},
//选择车型
listpx: function (e) {
if (this.data.pxopen) {
this.setData({
nzopen: false,
pxopen: false,
qyopen: false,
nzshow: true,
pxshow: false,
qyshow: true,
isfull: false,
shownavindex: 0
})
} else {
this.setData({
nzopen: false,
pxopen: true,
qyopen: false,
nzshow: true,
pxshow: false,
qyshow: true,
isfull: true,
shownavindex: e.currentTarget.dataset.nav
})
}
console.log(e.target)
},
selectleft: function (e) {
this.setData({
cityright: {},
citycenter: this.data.cityleft[e.currentTarget.dataset.city],
city: e.target.dataset.city,
select1: e.target.dataset.city,
select2: '',
select3: ''
});
},
selectcenter: function (e) {
this.setData({
cityright: this.data.citycenter[e.currentTarget.dataset.city],
select2: e.target.dataset.city,
select3: '',
city: e.target.dataset.city
});
//地区选择完毕
},
selectcity: function (e) {
console.log(e)
this.setData({
city: this.data.cityright[e.target.dataset.city],
select3: this.data.cityright[e.target.dataset.city] });
},
hidebg: function (e) {
this.setData({
qyopen: false,
nzopen: false,
剩余13页未读,继续阅读
weixin_38679449
- 粉丝: 5
- 资源: 935
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- stc12c5a60s2 例程
- Android通过全局变量传递数据
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0