微信小程序字母索引菜单

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.searchNavfor(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
}

目录文件

效果

微信小程序字母索引菜单相关推荐

微信小程序左右菜单mysql_微信小程序做出外卖菜单点单功能
这次给大家带来微信小程序做出外卖菜单点单功能,的注意事项有哪些,下面就是实战案例,一起来看一下. 1.功能仅是菜单功能一部分,仅供参考 2.需求描述:右侧菜品部分在滚动的时候,左侧菜品选中分类与右侧第 ...
微信小程序 - 实现左右菜单联动功能
今天给大家分享一下如何实现微信小程序左右菜单栏联动效果(相关代码模块我已单独整理放到github上面了,欢迎前来start),具体过程如下: 效果图: github地址:https://githu ...
[微信小程序]下拉菜单
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 动画效果是使用CSS3 @keyframes 规则(使 div 元素匀速向下移动) <view ...
微信小程序——自定义顶部菜单navigationBar方式（可详细了！）
前言: 开发中,设计师也是奇思妙想,把小程序顶部的默认菜单改成了自己觉得好看的样式,改了返回icon的样式,加了各种返回首页.收藏.什么鬼的按钮,甚至把胶囊按钮都给改了~~~,好吧,遵从设计师的审美, ...
微信小程序基础-侧边菜单的实现
效果思路: 1.整个页面分成左右两个view,横向布局:左侧view用子菜单view一个个填充,纵向布局. 2.子菜单内容存入数组,点击子菜单view,用data-index="{{ind ...
微信小程序——通讯录索引实现
文章目录前言展示效果代码分析 wxml 总结前言实现通讯录索引的关键就是使用好3个触发事件 bindtouchstart.bindtouchend和bindtouchmove. 展示效果代 ...
微信小程序布局水平菜单
 <view class="wear-menu"> <view class='menu-box' wx:key=&quo ...
微信小程序实现分类菜单 swiper分类菜单
做项目的时候遇到仿美团上的滚动菜单,需要调用后台数据的,以下是为大家整理的 wxml <view class="ification"><swiper class= ...
微信小程序数组索引 data-“”解释
按照官方最新文档循环的方式,索引值是以 wx:for-index="index" 方式写的, 以 parseInt(event.currentTarget.dataset.i ...

微信小程序字母索引菜单

微信小程序字母索引菜单相关推荐

最新文章

热门文章