微信小程序车辆品牌选择

格式比较类似于之前的城市选择，但是之前的城市选择格式有些太过繁琐了，然后看到了一篇比较好的处理方式，是采用节点查询的方法来找到左侧字母的定位，而且页面上的渲染也简单了很多
页面的实现效果

WXML

<block wx:for="{{list}}"><view class='letter' id="letter{{index}}">{{index}}</view><view class='item' wx:for="{{item}}" wx:for-item="idx">{{idx.name}}</view></block>
<view class='letters'><text wx:for="{{list}}" bindtap='chooseLetter' data-letter="{{index}}">{{index}}</text>
</view>

WXSS

page {width: 100%;height: 100%;
}
.letter {background: #ccc;font-size: 14px;padding-left: 10px;
}
.item {line-height: 40px;padding: 0 10px;border-bottom: 1px solid #eee;
}
scroll-view {width: 100%;height: 100%;
}.letters {position: fixed;top: 0px;right: 0;width: 30px;height: 100%;background: #eee;display: flex;flex-flow: column;
}
.letters text {display: block;font-size: 14px;color: #666;text-align: center;flex: 1;
}

var app = getApp()
Page({data: {},onLoad: function (options) {var that = this;wx.request({url: 'http://api.besttool.cn/?c=Car&a=brandlist',method: 'post',header: {'content-type': 'application/x-www-form-urlencoded'},data: {appid: 1,secret: 'd90824a5a8224fd7bb4fdffd331c62aa'},success(res) {console.log(res);that.setData({ list: res.data.brandlist });}})},chooseLetter(e) {this.setData({curLetter: null});var letter = e.currentTarget.dataset.letter;console.log(letter);// 查找对应的idvar id = "#letter" + letter;const query = wx.createSelectorQuery()  //创建节点查询器 queryquery.select(id).boundingClientRect() //这段代码的意思是选择Id = id的节点，获取节点位置信息的查询请求query.selectViewport().scrollOffset()  这段代码的意思是获取页面滑动位置的查询请求query.exec(function (res) {// res[0].top       // id节点的上边界坐标// res[1].scrollTop // 显示区域的竖直滚动位置wx.pageScrollTo({scrollTop: res[0].top + res[1].scrollTop,duration: 300})})},
})

微信小程序车辆品牌选择相关推荐

微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
微信小程序车辆登记+后台管理系统
<微信小程序车辆登记+后台管理系统>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序做的车辆登记前台和Java做的后台管理系统: 微信小程序-- ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
导入微信小程序显示未选择环境或未指定环境，解决办法
导入微信小程序显示未选择环境或未指定环境如下图所示: 解决办法:重新导入,选择云开发(需删掉以前的导入记录) 1.点击云开发申请通过 2.右键cloudfuncrions, 3.点击同步云函数列表 ...
微信小程序预览服务器图片,微信小程序实现图片选择并预览功能
本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textar ...
微信小程序点击选择拨打多个电话
微信小程序点击选择拨打多个电话效果预览 wxml 内 <view class='product-contact' wx:if="{{contact!=''}}" data- ...
【微信小程序】图片选择、转码、压缩、预览、上传，file与base64
0 前言微信小程序中,上传图片,如标题,涉及图片选择.图片转码.图片压缩.图片预览.图片上传等 1 图片选择需要使用微信提供的wx.chooseMedia chooseImage() {var t ...
尾号限行 API 实现微信小程序车辆尾号限行查询功能
引言车辆尾号限行是一个交通出行政策,根据地方交通管理政策,在一周内的某一天,该尾号车辆不允许在规定路段行驶.这种政策不是针对特定道路和特定车辆,是在一定区域内对所有车辆都具有制约能力,而且会不定期调 ...
微信小程序多规格选择
解析都在代码里面,先看看效果 1.index.html <view class="goodsdetialtwo"><view class='guige' bind ...

微信小程序车辆品牌选择

微信小程序车辆品牌选择相关推荐

最新文章

热门文章