它读取当前 view 的 dataset 中的
分类:彩世界开奖app苹果下载-编程

  • 微信小程序进阶开发-checkbox 运用、form 表单取值和提交
  • 微信小程序进阶开发-wx:for 循环列表
  • 微信小程序进阶开发-wx:key 高级列表循环
  • 微信小程序进阶开发-顶部菜单、利用 data 属性实现菜单当前项
  • 微信小程序进阶开发-下拉刷新
  • 微信小程序进阶开发-上滑加载更多
  • 微信小程序进阶开发-picker 实现选择框、时间选择、日期选择、性别选择……
  • 微信小程序进阶开发-模态输入对话框

.wxml 代码

<view class="nav"> <view data-navitem="1" class="{{currentNavItem == 1 ? 'current' : ''}}" bindtap="chngNavItem">全部</view> <view data-navitem="2" class="{{currentNavItem == 2 ? 'current' : ''}}" bindtap="chngNavItem">手机</view> <view data-navitem="3" class="{{currentNavItem == 3 ? 'current' : ''}}" bindtap="chngNavItem">电脑</view> <view data-navitem="4" class="{{currentNavItem == 4 ? 'current' : ''}}" bindtap="chngNavItem">音响</view> </view>

有个 data-navitem 标明当前项对应的数值。

.js 代码

data: { currentNavItem: 1 }, chngNavItem: function(e){ this.setData({ currentNavItem: e.target.dataset.navitem }); }

currentNavItem 与前面的 .wxml 页面配置,决定在哪一项显示 current。

而点击菜单项后,触发 chngNavItem,它读取当前 view 的 dataset 中的 navitem,赋给 currentNavItem。

固定顶部菜单

.nav { display:flex; flex-direction:row; position:fixed; padding:20rpx 0px; width:100%; background:#fff; z-index:9999; } .nav view { width:20%; border-bottom:4rpx solid #fff; text-align:center; } .nav view.current { border-bottom:4rpx solid #f00; }

也就是写 CSS,position:fixed,并注意增大 z-index。

  • 微信小程序进阶开发-checkbox 运用、form 表单取值和提交
  • 微信小程序进阶开发-wx:for 循环列表
  • 微信小程序进阶开发-wx:key 高级列表循环
  • 微信小程序进阶开发-顶部菜单、利用 data 属性实现菜单当前项
  • 微信小程序进阶开发-下拉刷新
  • 微信小程序进阶开发-上滑加载更多
  • 微信小程序进阶开发-picker 实现选择框、时间选择、日期选择、性别选择……
  • 微信小程序进阶开发-模态输入对话框

本文由彩世界开奖发布于彩世界开奖app苹果下载-编程,转载请注明出处:它读取当前 view 的 dataset 中的

上一篇:希望本文所述对大家的PHP程序设计有所帮助 下一篇:没有了
猜你喜欢
热门排行
精彩图文