项目需求:实现头部导航,可左右滑动。

<view class="top-news">
<view class="self-box">
<view class="img-self">
<image src="../../images/self.jpg"></image>
</view>
</view>
<view class="self-add">
<view class="img-add">
<image src="../../images/add.jpg"></image>
</view>
</view>
<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>
</view>
/* 头部滑动导航 */
.top-news{width:%;height: 50px;border-bottom:1px solid #;position: fixed;top:;left:;z-index: ;overflow: hidden;background: linear-gradient(to right,#f3f3f3,#fff,#f3f3f3); }
.self-box{position: absolute;left:;height:50px;width:40px;display: inline-block;background: #fff;}
.img-self{width:30px;height: 30px;padding-top:10px;padding-left: 5px;}
.img-self image{width:%;height: %;}
.self-add{position: absolute;right:;height:50px;width:40px;display: inline-block;background: #fff;}
.img-add{width:30px;height: 30px;padding-top:10px;padding-left: 5px;}
.img-add image{width:%;height: %;}
.scroll-view_H{white-space:nowrap;width: %;padding:6px 40px ;box-sizing: border-box;}
.nav-name{display:inline-block;font-size:16px;color: #2b2e33;border-bottom: 2px solid transparent;padding:10px;}
.nav-hover{color: #;/* border-bottom: 2px solid #f06000; */}
data: {
section: [
{ name: '精选', id: '' }, { name: '黄金单身汉', id: '' },
{ name: '综艺', id: '' }, { name: '电视剧', id: '' },
{ name: '电影', id: '' }, { name: '少儿', id: '' }
]
},

微信小程序(8)--头部导航滑动的更多相关文章

  1. 微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle

    ​ 这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题 ...

  2. 微信小程序自定义头部导航栏

    <!--index.wxml--> <view> <navbar id='index_header' background='{{background}}' pageNa ...

  3. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  4. 微信小程序-自定义菜单导航(实现楼梯效果)

    设计初衷 在开发页面时,往往需要实现,点击页面的导航菜单页面滚动到相应位置,滚动页面实现菜单选项的高亮.在html开发中,我们可以用到a标签锚点实现,jq的动画相结合实现类似效果.在框架中vant U ...

  5. 微信小程序设置底部导航栏目方法

    微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了 ...

  6. 微信小程序进行地图导航使用地图功能

    之前我写过的文章当中,提过小程序的打包大小.所以特地去下载一个区域的地图的这种方法,是不存在的. 我用的导航主要使用的是应用外的导航,这篇文章可能对于非常熟悉小程序的小伙伴来说就是小case,所以只适 ...

  7. 微信小程序~TabBar底部导航切换栏

    底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...

  8. 微信小程序之页面导航栏

    效果图: 页面有点丑,作为初次学习,页面可以要求不那么美观,先学会再说.毕竟后面可以优化的很漂亮. 代码实例如下: <view class="section btn-area" ...

  9. 微信小程序实现navbar导航栏

    一.效果图 二.涉及到组件 1.view组件 2.swiper组件 三.原理 整体来讲是比较简单的,顶部的navbar是使用flex进行布局的:下面的内容区域则是使用到swiper组件,使用方式比较简 ...

  10. 微信小程序自定义底部导航栏组件+跳转

    微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...

随机推荐

  1. 01.helloworld--标签

    """参考网站:http://python.cocos2d.org/doc/programming_guide/index.html""" ...

  2. DataFrame.loc的区间

    df.loc[dates[0:1],'E']和df.loc[dates[0]:dates[1],'E']不同. 前者不包含dates[1],后者是包含dates[1]的. 根据Python3中实际代码 ...

  3. dede标签大全

    想必很多人对后台不熟悉,并且觉得很难.其实不难,只是你们没有找到合适的方法学习而已!只有找到一个合适的学习方法,不管做什么事情,我想都很容易.学习讲究的是效率,而效率又是由思路决定的.就拿网页制作来说 ...

  4. php current()函数 语法

    php current()函数 语法 作用:返回数组中的当前元素的值.直线电机工作原理 语法:current(array) 参数: 参数 描述 array 必需.规定要使用的数组. 说明:返回数组中的 ...

  5. BZOJ 4804: 欧拉心算 欧拉函数

    Description 给出一个数字N Input 第一行为一个正整数T,表示数据组数. 接下来T行为询问,每行包含一个正整数N. T<=5000,N<=10^7 题解: 求 $\sum_ ...

  6. MVC 无法将带 [] 的索引应用于“System.Dynamic.DynamicObject”类型的表达式

    无法将带 [] 的索引应用于“System.Dynamic.DynamicObject”类型的表达式 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代 ...

  7. 带有lazy标记的线段树

    #include<bits/stdc++.h> using namespace std; ]; struct st{ int l,r,val,add; }tr[]; void build( ...

  8. Nginx 禁止IP访问 只允许域名访问

    今天要在Nginx上设置禁止通过IP访问服务器,只能通过域名访问,这样做是为了避免别人把未备案的域名解析到自己的服务器IP而导致服务器被断网,从网络上搜到以下解决方案: Nginx的默认虚拟主机在用户 ...

  9. sql select语句详解

    先group by 后  order by SELECT [ ALL | DISTINCT [ ON ( expression [, ...] ) ] ]    * | expression [ AS ...

  10. Anaconda在Python3和Python2之间切换,Conda命令,anaconda中python的升级和降级

    当在pycharm IDE中指定不同的Python版本时,设置方法 File->Setting->Project:XXXX->Project Interpreter    选择不同位 ...