微信小程序实现字母索引菜单

本文实例为大家分享了微信小程序实现字母索引菜单的具体代码,供大家参考,具体内容如下

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
}

目录文件

效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实现单列下拉菜单效果

    接下来我想做的是一个下拉菜单用来分类的,但是在网上搜了一下,基本上全都是比较复杂的分类菜单,最简单的也是分三列的下拉菜单,但是并不想要这么复杂的,最后找了一个三列的,改成了单列.也把代码尽可能的简单化了. 实现的效果图: 合并状态: 首先下面是目录结构:  下面是实现的具体代码: .wxml <!--选择框--> <view class="product-list"> <!--条件选择--> <view class="choice-b

  • 微信小程序实现弹出菜单功能

    需求 点击标签栏按钮,向下弹出菜单,再次点击,收回菜单 要解决的问题 标签栏三栏样式,标签栏固定不动: 点击标签栏弹出菜单,并且出现透明遮罩: 遮罩优先级在弹出框之下: 弹出框内标签的设置: 滚动栏滚动条的隐藏 如何解决? 弹性布局,横向,三者平分整栏; 状态监听点击事件,数据控制hide或者show,通过rgba设置透明度 弹出框设置z-index: 弹性布局flex 横向排列 超出后wrap 然后space-around控制间距 ::-webkit-scrollbar { width: 0;

  • 微信公众号菜单配置微信小程序实例详解

    先提条件是你的公众号版定了小程序 第一种:直接配置     第二张:代码配置 1.进入在线接口调试工具        2.选择自定义菜单 菜单body为json格式: { "button": [ { "type": "miniprogram", "name": "合作", "url": "http://form.mikecrm.com/2xb9aT", "a

  • 微信小程序实现下拉菜单切换效果

    本文实例为大家分享了微信小程序实现下拉菜单切换展示的具体代码,供大家参考,具体内容如下 效果图: wxml: <!-- 下拉菜单 --> <view id="swiper-tab"> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

  • 微信小程序实现的点击按钮 弹出底部上拉菜单功能示例

    本文实例讲述了微信小程序实现的点击按钮 弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindch

  • 微信小程序实现全国机场索引列表

    本文为大家分享了微信小程序实现MUI索引列表的具体代码,供大家参考,具体内容如下 效果展示图 实现的原理 '当前选择机场'和右侧的导航栏采用的是固定定位: 左侧的展示窗口的滚动采用的是scroll-view组件: 选择中的字母提示是自己WXSS样式制作. WXML <view class="right-nav"> <view bindtap="getCurrentCode" class="{{chooseIndex == index ?

  • 微信小程序 下拉菜单的实现

    微信小程序 下拉菜单 看下实现效果图: 实例: //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-botto

  • 微信小程序 仿美团分类菜单 swiper分类菜单

    有同学要仿美团分类菜单.写了一个. 跟 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换很类似 代码: js就这么一点 //index.js //获取应用实例 var app = getApp() Page({ data: { currentTab: 0, grids: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], swiperList:[0, 1, 2, 3, 4] }, onLoad: function () { }, click: function (e) {

  • 微信小程序 特效菜单抽屉效果实例代码

    实现效果图: 抽屉菜单是app上常见的菜单设计方式,典型的抽屉菜单如下图所示 下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示: 页面包含一个主页和抽屉菜单页,为了实现滑动效果,页面采用absolute布局,代码如下 index.wxml <view id='id-main-page' class='main-page' animation='{{animationData}}' style='left:{{mainPageLeft}}rpx;' bindtouchstart='onM

  • 微信小程序 下拉菜单简单实例

    微信小程序 下拉菜单简单实例 wcss  /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px sol

随机推荐