Recientemente, cuando estaba trabajando en un pequeño proyecto de programa, encontré algo con la función de la barra de índice Este proyecto es un requisito para seleccionar un modelo de automóvil. Primero observe las representaciones: la
realización de las funciones anteriores puede incluir personalizar el cuadro emergente, hacer clic en la letra del índice para saltar a la posición correspondiente y buscar la palabra clave resaltada. Implementémoslos uno por uno a continuación.
Nota especial : Cuando vi por primera vez este tipo de componente de barra de índice, pensé en usar el componente indexBar de vant, pero cuando el componente emergente indexBar se usa más tarde, hacer clic en la letra del índice no es válido, porque la capa emergente de la ventana emergente debe posicionarse y saltar La posición de la letra correspondiente no es válida, ¡es un pozo! !
código css
<!-- 蒙层 -->
<view class="remark" wx:if="{
{showBrand}}" bindtap="closeBrand" catchtouchmove="preventTouchMove"></view>
<!-- 内容 -->
<view class="re-con" wx:if="{
{showBrand}}">
<view class="cityBox" wx:if="carBrandList">
<view class="search-city">
<view class="search-con">
<icon class="iconfont icon-fangdajing" bindtap="searchKey"></icon>
<input placeholder="请输入车型搜索" type="text" value="{
{searchValue}}" bindinput="getCity"/>
</view>
</view>
<view class="content">
<view class="all-city">
<scroll-view class="city-scroll {
{isFirstId?'':'city-scoll-height'}}" scroll-y="true" scroll-with-animation="true" scroll-into-view="{
{toView}}">
<view class="city-list" wx:if="{
{!searchList.length}}">
<!-- 循环城市列表 start -->
<view wx:for="{
{carBrandList}}" wx:key="index" id="{
{'city'+index}}" catchtap='selectcity' data-initial="{
{item.initial}}" class="listGroup">
<!-- 字母导航 -->
<view class="nav-text">
<text class="{
{index==currentInitial?'currentClass':''}}">{
{
item.initial}}</text>
</view>
<!-- 汽车一级品牌名字 -->
<view class="show-city">
<radio-group class="radio-group" bindchange="radioChange" wx:if="{
{!isFirstId}}">
<view class="city-item" wx:for="{
{item.carBrandInfoList}}" wx:key="index" data-name="{
{item.name}}" data-vendorid="{
{item.parentId}}" data-obj="{
{item}}" bindtap="clickFirstId">
<label for="{
{item.carModelId}}">
<image src="{
{item.logo}}"></image>
<text class="text">{
{
item.name}}</text>
</label>
<radio class="radio" id="{
{item.carModelId}}" hidden="{
{car.carModelId!=item.recordId}}" value="{
{item.name}}" checked="{
{car.carModelId==item.recordId}}" color="#28b8ff"></radio>
</view>
</radio-group>
<block wx:else>
<view class="city-item" wx:for="{
{item.carBrandInfoList}}" wx:key="index" data-name="{
{item.name}}" data-obj="{
{item}}" bindtap="clickFirstId">
<image src="{
{item.logo}}"></image>
<text>{
{
item.name}}</text>
</view>
</block>
</view>
</view>
<!-- 循环城市列表 end -->
</view>
<!-- 关键词搜索的列表 -->
<view class="city-list" wx:if="{
{searchList.length}}">
<view wx:for="{
{searchList}}" wx:key="index" id="{
{'city'+index}}" catchtap='selectcity' data-initial="{
{item.initial}}">
<view class="show-city">
<radio-group class="radio-group" bindchange="radioChange">
<view class="city-item" data-name="{
{item.fullName}}" data-vendorid="{
{item.vendorId}}" data-obj="{
{item}}" bindtap="clickFirstId">
<label for="{
{item.recordId}}">
<!-- <text >{
{
item.fullName}}</text> -->
<text wx:for="{
{item.fullName}}" wx:key="index" class="{
{item == searchValue? 'currentClass' : '' }}">{
{
item}}</text>
</label>
<radio class="radio" id="{
{item.recordId}}" hidden="{
{car.carModelId!=item.recordId}}" value="{
{item.fullName}}" checked="{
{car.carModelId==item.recordId}}" color="#28b8ff"></radio>
</view>
</radio-group>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- 字母索引 start -->
<view class="search-nav" wx:if="{
{isFirstId&&!searchList.length}}">
<text bindtap="cityScroll" data-initial="{
{item.initial}}" data-index="{
{index}}" wx:for="{
{carBrandList}}" wx:key="index" class="navlist {
{index==currentInitial?'currentClass':''}}" catchtouchmove="preventTouchMove">{
{
item.nav}}</text>
</view>
<!-- 字母索引 end -->
</view>
</view>
<!-- 取消确定 -->
<view class="foot-btn" wx:if="{
{!isFirstId}}">
<view>
<view class="cancel" bindtap="clickReset">重置</view>
<view class="comfir" bindtap="clickComfir">确认</view>
</view>
</view>
</view>
código js
1. Haga clic en la letra de índice a la derecha para saltar a la posición correspondiente.
// 点击英文字母进行跳转到相应位置
cityScroll(e) {
let data = this.data.carBrandList
let Index = e.currentTarget.dataset.index
let initial = data[Index].initial
console.log(initial)
if (data.length) {
data.map((res, index) => {
if (initial == res.initial) {
this.setData({
currentInitial: index,
toView: `city${
index}`//用于定位
})
}
})
}
wx.showToast({
title: initial,
icon: 'none'
})
},
El toView anterior usa la propiedad scroll-into-view del componente scroll-view del subprograma (el valor debe ser un ID de elemento secundario (el ID no puede comenzar con un número). Establezca en qué dirección desplazarse, luego desplácese hasta el elemento en qué dirección) Establezca una identificación para el elemento de nivel superior de cada modelo de automóvil (la primera letra es A), correspondiente al id = "{ {'ciudad' + índice}}" enlazado arriba , puede obtener el índice actual cuando hace clic en él, y luego Date cuenta del salto.
2. Destacar las palabras clave de búsqueda
//搜索关键词
searchKey() {
this.setData({
isFirstId: false
})
if (this.data.searchValue) {
netRequest.webRequest(getApi.getKeyWords, {
keyWords: this.data.searchValue
}, "get").then(res => {
let data = res.data
if (data.length) {
data.map(item => {
item.fullName = this.getSpit(item.fullName, item.brandName)
})
this.setData({
searchList: data
})
this.searchTap()
}
})
} else {
this.setData({
searchList: '',
carBrandList: this.data.copyBrand,
isFirstId: true
})
}
},
//处理关键词高亮
searchTap: function() {
var that = this;
that.setData({
listDataCopy: that.data.searchList//搜索关键词后台返回的搜索列表
})
var data = that.data.searchList;
var newData = that.data.listDataCopy;
for (var i = 0; i < data.length; i++) {
var dic = data[i]
var newDic = newData[i]
var fullName = dic["fullName"]
newDic["fullName"] = this.getInf(fullName, that.data.searchValue);
}
that.setData({
searchList: newData,
})
console.log(this.data.searchList)
},
//整理关键词
getInf(str, key) {
return str.toString().replace(new RegExp(`${
key}`, 'g'), `%%${
key}%%`).split('%%')
},
Idea de implementación: primero, obtenga la lista de valores de búsqueda devueltos en segundo plano de acuerdo con las palabras clave, y luego recorra la matriz para obtener los atributos que deben mostrarse. El ejemplo es fullName. Pase las palabras clave de búsqueda y el fullName atravesado en la función getInf, que se implementa en fullName. (Debe haber una cadena de palabras clave en fullName, porque es el valor buscado según la palabra clave). Después de encontrar fullName, separe fullName, como fluuName = "BMW X5M" y la palabra clave es "BMW", luego getInf devuelve ["", "BMW", "X5M"], luego recorra esta matriz en la interfaz, y si el elemento atravesado es el mismo que el valor de búsqueda "BMW", luego agregue la calss resaltada, el ejemplo anterior es el segundo de la matriz ( El subíndice es 1) se agregarán calss de resaltado para lograr el efecto de resaltado de la palabra clave "BMW".
extensiones
Para lograr esta función , la lista de letras del índice en el lado derecho del dedo se desliza para saltar a la posición correspondiente.Debido al componente de vista de desplazamiento, hay un retraso de animación en este proyecto para lograr esta función. Puede consultar las siguientes ideas: si
desea deslizar el dedo hacia el índice para saltar a la posición correspondiente, debe calcular la altura de cada pieza y obtener la diferencia calculada entre la páginaY tocada y la páginaY / altura en constante cambio de cada elemento del índice, el código como sigue:
//获取每一项组合的高度（根据首字母分组）
calculateHeight() {
let that = this
const query = wx.createSelectorQuery()
const list = query.selectAll('.listGroup')
if (this.data.isFirstId) {
const height = query.select('.navlist')
//获取第一个字母索引元素的高度
height.boundingClientRect(function(rect) {
that.setData({
height: rect.height
})
}).exec()
}
let arr = []
list.boundingClientRect(function(rect) {
if (rect.length) {
rect.map(res => {
arr.push(res.height)
})
that.setData({
listHeight: arr
})
console.log(arr)
}
}).exec()
},
El wx.createSelectorQuery en la figura anterior es la API con la que viene el applet para obtener el elemento de demostración. Portal => boundingClientRect
Esta API puede obtener directamente la altura, el ancho, la izquierda, la derecha, la parte superior, la parte inferior y otra información del elemento.
Conclusión
El golpe se acabó. Es un poco apresurado escribir en mi tiempo libre, por favor contácteme si comete algún error. Mi WeChat: huang009516