微信小程序:scroll-view制作横向滚动导航条特效
一、scroll-view介绍
微信小程序官方释义为:可滚动视图区域,目前一共有10几个属性,包括:scroll-x、scroll-y、scroll-top等。详细介绍见官方文档:
developers./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个后面的菜单时就会自动向左滚动一段距离,然后显示下一个菜单。如图:可横向滚动的导航特效终极效果可横向滚动的导航特效终极效果
至此,一个微信小程序中可横向滚动的导航特效就说完了。至于点击时,下面的内容切换,有多种方法,看官自己动手吧。
感谢艺灵/xwzj/-11-25/weixin-miniprogram-scroll-view.html