前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >实现可左右滑动的导航菜单页面

实现可左右滑动的导航菜单页面

作者头像
林老师带你学编程
发布2019-05-25 21:18:29
3.8K0
发布2019-05-25 21:18:29
举报
文章被收录于专栏:强仔仔

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1433516

1.wxml页面代码:

<view class="nav-scroll">

<scroll-view class="scroll-view\_H" scroll-x="true" style="width: 100%">

<text wx:for="{{section}}" wx:key="id" id="{{item.id}}" catchtap="handleTap" class="nav-name {{item.id == currentId ? 'nav-hover' : ''}}">{{item.name}}</text>

</scroll-view>

</view>

2.wxss页面代码:

white-space:nowrap; 规定段落中的文本不进行换行:

.scroll-view_H{

white-space:nowrap;

width: 100%;

background-color: rgba(255, 255, 255, 0.7);

}

.nav-name{

display:inline-block;

margin:0 5px;

font-size:16px;

color: #2b2e33;

border-bottom: 2px solid transparent;

padding:10px;

}

.nav-hover{

color: #f06000;

border-bottom: 2px solid #f06000;

}

3.js页面代码:

data数据部分:

section: [

代码语言:txt
复制
  { name: '首页', id: '1001' }, { name: '男装', id: '1032' },
代码语言:txt
复制
  { name: '鞋包', id: '1003' }, { name: '手机', id: '1004' },
代码语言:txt
复制
  { name: '电器', id: '1005' }, { name: '食品', id: '1021' },
代码语言:txt
复制
  { name: '百货', id: '1015' }, { name: '服饰', id: '1121' },
代码语言:txt
复制
  { name: '汽车', id: '1025' }, { name: '家装', id: '1121' },
代码语言:txt
复制
  { name: '运动', id: '1205' }, { name: '母婴', id: '4021' },
代码语言:txt
复制
  { name: '水果', id: '1225' }, { name: '内衣', id: '3121' },
代码语言:txt
复制
  { name: '家纺', id: '1525' }, { name: '美妆', id: '1521' }
代码语言:txt
复制
]

函数部分:

// 头部导航点击事件

handleTap: function (e) {

代码语言:txt
复制
console.log(e);

let id = e.currentTarget.id;

if (id) {

this.setData({ currentId: id })

this.onLoad();

代码语言:txt
复制
}

}

4.运行截图:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年04月08日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档