微信小程序菜单栏

最新推荐文章于 2024-09-01 22:07:00 发布

jweicao

最新推荐文章于 2024-09-01 22:07:00 发布

阅读量1.2k

点赞数 1

文章标签： js css 微信游戏

本文链接：https://blog.youkuaiyun.com/jweicao/article/details/118227953

版权

本文展示了如何在微信小程序中创建一个简单的菜单栏，包括页面结构、CSS样式设计和JavaScript事件及数据处理，实现过程简易明了。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果

在这里插入图片描述

页面

<!--pages/ltab/ltab.wxml-->
<!--主盒子-->
<view class="top-title">
    <view class="title-item">湘南院区</view>
    <view class="title-item">东院</view>
    <view class="title-item">北院</view>
</view>
<view class="body">
    <!--左侧栏-->
    <view class="nav-left">
        <block wx:for="{
    {title}}" wx:key="{
    {title}}">
            <view class="iten {
    {currentTab==item.id ? 'on' : ''}}" data-current="{
    {item.id}}" bindtap="swichNav"><