微信小程序實現字母索引菜單
本文實例為大傢分享瞭微信小程序實現字母索引菜單的具體代碼，供大傢參考，具體內容如下
wxml文件
<view class="container">
<view class="content">
<view class="all-food">
<view class="food">全部食物</view>
<scroll-view class="food-scroll" scroll-y="true" scroll-into-view="{{toView}}" scroll-with-animation="true">
<view class="food-list">
<view wx:for="{{foodList}}" wx:key="{{index}}" id="{{'food'+index}}" data-title="{{item.title}}">
<view class="nav-text">
<text>{{item.title}}</text>
</view>
<view class="show-food">
<text wx:for="{{item.lists}}" wx:key="{{index}}">{{item}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="search-nav" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
<text bindtap="foodScroll" data-index="{{index}}" wx:for="{{searchNav}}" wx:key="{{index}}">{{item}}</text>
</view>
</view>
</view>
js文件
let foodList = require('../../utils/common');
Page({
/**
* 頁面的初始數據
*/
data: {
foodList:[],
toView:'',
searchNav:[]
},
getFoodList(){
let searchNav = this.data.searchNav
for(let i in foodList.foodList){
searchNav.push(foodList.foodList[i].title)
}
this.setData({
foodList:foodList.foodList,
searchNav:searchNav
})
},
foodScroll(e){
let index = e.currentTarget.dataset.index;
this.setData({
toView:`food${index}`
})
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
this.getFoodList();
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
wxss文件
/* pages/city/city.wxss */
.container {
padding: 0 5rpx;
display: flex;
justify-content:row;
background-color: #fff;
}
.content{
margin-top: 30rpx;
width: 100%;
}
.food{
font-size: 40rpx;
padding-bottom: 10rpx;
border-bottom: 1rpx solid #fff;
height:30rpx;
line-height:30rpx;
}
.food-scroll {
left: 0;
position: fixed;
height: 100%;
width: 720rpx;
}
.show-food{
display: flex;
flex-direction: column;
justify-content: left;
}
.show-food text{
margin-top: 10rpx;
margin-bottom: 10rpx;
font-size: 32rpx;
border-bottom: 1rpx solid silver;
}
.search-nav{
position: fixed;
top: 120rpx;
bottom: 5rpx;
right: 5rpx;
display:flex;
flex-direction: column;
justify-content: space-around;
}
.search-nav text{
text-align: center;
font-size: 24rpx;
}
common.js文件
let food = [
{
"title":"A",
"lists":[
"艾蒿"
]
},
{
"title":"B",
"lists":["白蘿卜","白瓜","白菜","菠菜","白筍","百合","擯榔","白花菜","白沙蒿","百裡香","豆腐柴","芭蕉","菠蘿","白金瓜"
]
},
{
"title":"C",
"lists":["蠶豆","菜花","春筍","慈菇","刺兒菜","草菇","草莓","橙","茶腸","草魚","鯧魚"
]
},
{
"title":"D",
"lists":["豆腐","豆漿","豆腐腦","豆奶","豆汁","豆腐絲","豆腐卷","豆腐皮","豆腐幹","豆幹尖","豆沙","刀豆","豆角","冬瓜","大蒜","大蔥","大白菜","冬寒菜","冬筍","豆瓣菜","大薯","大車前","地膚","大黃","大麻","大紅菇","地衣","蛋清腸"
]
},
{
"title":"E",
"lists":["鵝肉","鵝肝","鵝腿","鵝蛋"]
},
{
"title":"F",
"lists":["粉絲","腐竹","番茄","方瓜","佛手瓜","分蔥","發菜"
]
},
{
"title":"G",
"lists":["掛面","甘薯","甘藍","觀達菜","枸杞","柑","桂圓","橄欖","桂魚","鮭魚"]
},
{
"title":"H",
"lists":["花卷","黃豆","花豆","紅蘿卜","花葉蘿卜","胡蘿卜","荷蘭豆","黃豆芽","葫子","葫蘆","葫蘆條","黃瓜","茴香","黑筍","花案菜","槐花","黃麻葉","苦苦菜","猴頭菇","黃菇","海帶","海棠","黃皮果","火腿腸","火雞","火雞肝","火雞腿","黃油","黃鱔","鰉魚","黃骨魚"
]
},
{
"title":"J",
"lists":["豇豆","芥菜頭","節瓜","金瓜","金絲瓜","韭菜","韭黃","韭苔","金針菜","菊筍","茭白","薑","蕨菜","金針菇","雞肉","雞腿","雞心","雞翅","雞腎","雞脖"]
},
{
"title":"K",
"lists":["空鍋餅","苦瓜","苦菜","口蘑","葵花籽"]
},
{
"title":"L",
"lists":["烙餅","綠豆餅","龍豆","綠豆芽","辣椒","蘿卜纓","落葵","輪葉黨參","羅勒","梨","梅","荔枝","栗子","臘肉","驢肉","驢鞭","驢心","駱駝肉","駱駝掌","駱駝蹄", ]
},
{
"title":"M",
"lists":["面條","饅頭","木薯","梅豆","木豆","毛豆","毛筍","馬蹄","馬齒莧","馬蘭頭","麥瓶草",
"蘑菇","木耳","面蛋","芒果","木瓜","馬肉","馬心"
]
},
{
"title":"N",
"lists":["腦豆","奶茄子","南瓜","牛至","檸檬","牛肉","牛肋","牛腿","牛裡脊","牛蹄筋", "牛鞭","牛肚","牛肝","牛肺","牛腦","牛骨","牛大腸","牛心","牛腎","牛肉幹", "牛肉松",
]
},
{
"title":"O",
"lists":["藕粉","藕"]
},
{
"title":"P",
"lists":["扁豆","蒲菜","噴瓜","蒲公英","蘋果","葡萄","葡萄幹"]
},
{
"title":"Q",
"lists":["蕎麥","青豆","茄子","秋葵","青蒜","芹菜","掐不齊","清明菜","球莖茴香","啟明菜葉","青菇"
]
},
{
"title":"R",
"lists":["人參果","肉松","兒童腸"]
},
{
"title":"S",
"lists":["燒餅","水面筋","馬鈴薯","素火腿","素大腸","素雞","素雞絲卷","素什錦","四季豆","蛇瓜","絲瓜","筍瓜","蒜苗","生菜","水芹菜","山藥","石頭菜","沙參葉","松菇","沙果","酸刺","石榴","柿子","柿餅","桑葚"
]
},
{
"title":"T",
"lists":["通心面","甜椒","甜菜葉","茼蒿","湯菜","土三七","苔菜","桃","甜瓜","兔肉"
]
},
{
"title":"W",
"lists":["豌豆","烏菜","萵筍","歪頭菜","梧桐子","無花果","午餐肉"
]
},
{
"title":"X",
"lists":["小豆粥","西葫蘆","小蔥","小白菜","西蘭花","香菜","莧菜","夏枯草","香椿","香茅","小旋花","竹葉菜","香菇","香蕉","西瓜","杏仁","橡子","叉燒肉","咸肉","香腸"
]
},
{
"title":"Y",
"lists":["油餅","油條","油面筋","薏米","玉米","蕓豆","洋蔥","油菜","芋頭","洋薑","野蔥","野韭菜","營野菊口","野蒜","野莧菜","榆錢","魚腥草","羊肚菌","銀耳","櫻桃","柚","楊梅"
]
},
{
"title":"Z",
"lists":["竹筍"," 榛子","珍珠白菇","紫菜","棗","豬肉","芝麻","豬大排","豬耳","豬蹄","豬頭","豬肘","豬肺","豬肝","豬腦","豬皮","豬舌","豬腰","豬心","豬血"
]
}
]
module.exports = {
foodList:food
}
目錄文件
效果
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。