小程序头部滚动导航,置顶头部导航

2020-03-25   阅读:2709   类型:后端   分类:微信小程序    标签: 微信小程序

小程序头部滑动导航例子,主要运用微信的 scroll-view 和样式 white-space: nowrap;

wxml文件代码:

<view class="container">
<!-- 顶部导航wxml -->
<view class='totle-nav'>
<scroll-view class='scroll-wrap' scroll-x="true" style='width:100%;'>
<text class="active">导航1</text>
<text>导航2</text>
<text>导航3</text>
<text>导航4</text>
<text>导航5</text>
<text>导航2</text>
<text>导航3</text>
<text>导航4</text>
<text>导航5</text>
<text>导航2</text>
<text>导航3</text>
<text>导航4</text>
<text>导航5</text>
<text>导航2</text>
<text>导航3</text>
<text>导航4</text>
<text>导航5</text>
</scroll-view>
</view>
<!-- 顶部导航wxml -->
<view class="new_list">
<view class="new_item">1</view>
</view>
</view>


wxss代码:


.totle-nav{
margin: 0;
padding: 0;
width: 100%;
height: 80rpx;
position: fixed;
left: 0rpx;
top: 0rpx;
transform: translateZ(0);
z-index: 999;
background: #fff;
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.totle-nav .scroll-wrap{
white-space: nowrap;
display: inline-block;
background-color:#fff;
font-size: 32rpx;
width: 100%;
box-sizing:border-box;
}
.totle-nav .scroll-wrap text{
display: inline-block;
padding: 10px 0 4px 0;
margin: 0 18rpx;
color:#333;
box-sizing: border-box;
}
.totle-nav .scroll-wrap text.active{
border-bottom:3px solid #fb7299;
color: #fb7299;
}
.new_list{ width: 100%;float: left; padding-top: 100rpx; }
.new_item{width: 100%; float: left; margin-bottom: 20rpx; border-bottom: solid 3px #edeef0 ; padding-bottom: 10rpx;}

最终效果:


GIF.gif

腾讯云11.11上云拼团Go,2核2G3M云服务器 28元/年

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/295.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×