微信小程序：scroll-view制作横向滚动导航条特效

一、scroll-view介绍

微信小程序官方释义为：可滚动视图区域，目前一共有10几个属性，包括：scroll-x、scroll-y、scroll-top等。详细介绍见官方文档：
developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html。下面来说下如何使用scroll-view做一个可横向滚动的导航条吧。效果如图：

二、scroll-x实现横向滚动
先来看下wxml页面的代码。

wxml代码

<scroll-view scroll-x class='swiper-nav' scroll-left='{{swiperNav.x}}' scroll-with-animation='true' bindtap='swiperNav'><text wx:for='{{swiperNav.arr}}' wx:key='{{index}}' class='item-nav {{swiperNav.i==index ? "active" : ""}}' data-i='{{index}}'>{{item.txt}}</text>
</scroll-view>

此时保存后模拟器中并不会显示任何结果，因为数据在js中。

2.2、js代码

data: {swiperNav:{i:0,arr:[{ v: 0, txt: "推荐专区" },{ v: 1, txt: "进口商品" },{ v: 2, txt: "饮料冲调" },{ v: 3, txt: "休闲零食" },{ v: 4, txt: "生鲜" },{ v: 5, txt: "速食调味" }]}
}

此时我们再保存后页面中就有效果了。如图：

现在没有任wxss样式虽然现在页面比较挫，主要是因为我们还没有写wxss。

2.3、wxss代码

/*横向导航*/
.swiper-nav{background-color: #fff;}
.swiper-nav .item-nav{position: relative;padding: 30rpx 32rpx;color: #999;font-size: 30rpx;cursor: pointer;display: inline-block}
.swiper-nav .active{color: #f43838}
.swiper-nav .active::after{content:'';position: absolute;left: 32rpx;right: 32rpx;height:0;border-bottom: 4rpx solid #f43838;border-radius: 4rpx;bottom: 18rpx}

现在再来看下页面，是不是有点感觉了？如图：现在导航显示成两行

显然，此时仍然是有问题的。因为此时我们的导航是两行显示，而预期效果应该是一行显示才对。那要怎么办呢？

2.4、white-space: nowrap登场
你说这个微信小程序也真是的哈，既然都提供了scroll-x了并说这个可以横向滚动，那你干嘛不一步到位呢？何必还要让我们再多写一个css属性white-space: nowrap？

当我们把white-space: nowrap添加到.swiper-nav中后再保存就可以看到预期效果了。如图：添加white-space-nowrap属性后的效果图

但是此时点击时并没有任何效果，激活状态也不会发生变化，因为激活状态需要再写js。

2.5、bindtap事件
js该怎么写呢？不妨先分析下动态激活状态的功能。在前面的wxml页面中，我们用swiperNav.i和index来判断是否需要激活，然后为了可以获取当前点击元素的index，用了一个data-i来接收索引。所以此时我们在点击后动态的改变swiperNav.i就可以了。

2.6、点击事件swiperNav的js代码

swiperNav:function(e){console.log(e);this.setData({'swiperNav.i':e.target.dataset.i})
},

此时保存后再点击就有效果了，如图：

怎么样，6不6？！

但是，细心的看官应该会看到一个问题：点击的时候，有一个背景是什么鬼？！

2.7、-webkit-tap-highlight-color去点击元素时的背景
其实这个问题在移动端页面上也有体现，而做法就是：

-webkit-tap-highlight-color:rgba(0,0,0,0);

所以此时我们把这段代码放到咱们的wxss中即可。然后再保存，此时再点击时就没有那个背景了。如图：

怎么样，6吧！

那这样就完事了？

当然没有！别忘了，咱们导航可是有6个分类的，现在只显示了4个，剩下两个可无法点出来的哦！

三、scroll-left设置横向滚动条位置
其实在上面的代码中，艺灵已经写过了scroll-left=’{{swiperNav.x}}’，只不过在js中没有写相就的事件。

我们先要在data中添加一个x的数据，初始值为0。然后再来写如何计算这个x的值。

3.1、动态计算scroll-left位置的js代码

swiperNav:function(e){console.log(e);/*获取可视窗口宽度*/var w=wx.getSystemInfoSync().windowWidth;var leng=this.data.swiperNav.arr.length;var i = e.target.dataset.i;var disX = (i - 2) * w / leng;if(i!=this.data.swiperNav.i){this.setData({'swiperNav.i':i})}this.setData({'swiperNav.x':disX})
},

保存后，再点击第3个后面的菜单时就会自动向左滚动一段距离，然后显示下一个菜单。如图：可横向滚动的导航特效终极效果可横向滚动的导航特效终极效果

至此，一个微信小程序中可横向滚动的导航特效就说完了。至于点击时，下面的内容切换，有多种方法，看官自己动手吧。

感谢艺灵http://www.yilingsj.com/xwzj/2018-11-25/weixin-miniprogram-scroll-view.html

微信小程序：scroll-view制作横向滚动导航条特效相关推荐

[微信小程序] 动态设置页面标题、导航条 navigationBarTitleText
前言 navigationBarTitleText用于小程序设置当前页面标题,可以给每个页面设置独立的标题,但是这样不能满足一些特殊业务场景:比如说商城,商品详情页面的标题,会根据获取到的数据动态修改 ...
微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
微信小程序：block制作动态商品列表
微信小程序:block制作动态商品列表在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表. 运行截图实现代码 js: P ...
# 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
微信小程序中如何制作瀑布流效果
微信小程序中如何制作瀑布流效果如图是首先,页面布局,页面分为两个部分,左右各一部分,各自插入图片,页面代码如下: <view class="city_history"> ...
个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
微信小程序使用 setInterval 制作计时器后台延迟问题
微信小程序使用 setInterval 制作计时器后台延迟问题之前参加2020年微信小程序应用开发大赛的时候写了一个用于校园足球的微信小程序--踢在浙大. 在小程序的设计过程中出现了一个裁判工具的功 ...
微信小程序：炫酷手持滚动弹幕生成小工具
这是一款滚动弹幕生成微信小程序源码让弹幕文字在手机屏幕上跑起来,LED弹幕手机弹幕,告白神奇,等支持多种模板,每一种模板都支持自定义颜色等等字体跳动,字体表白等等另外用户也可以支持自定义文字 ...
微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...

微信小程序：scroll-view制作横向滚动导航条特效

微信小程序：scroll-view制作横向滚动导航条特效

微信小程序：scroll-view制作横向滚动导航条特效相关推荐

最新文章

热门文章