微信小程序导航栏切换页面

先看一下效果

wxml代码

<view class="container"><view class="nav"><view class="item {{current == '0' ? 'active' : ''}}" catchtap="onClick" data-id="0">首页</view><view class="item {{current == '1' ? 'active' : ''}}" catchtap="onClick" data-id="1">分类</view><view class="item {{current == '2' ? 'active' : ''}}" catchtap="onClick" data-id="2">发现</view><view class="item {{current == '3' ? 'active' : ''}}" catchtap="onClick" data-id="3">收藏</view><view class="item {{current == '4' ? 'active' : ''}}" catchtap="onClick" data-id="4">我的</view></view><view class="list"><block wx:for="{{newslist}}" wx:for-index="idx"><view class="detail" wx:if="{{idx == current}}">{{item.text}}</view></block></view>
</view>

在这部分代码中使用了自定义属性data-、三元运算、列表渲染和条件渲染。在这里特别要注意的是：wx:if="{{idx == current}}这个idx变量必须要在<block wx:for="{{newslist}}" wx:for-index="idx">这进行声明，如果没有声明，默认为index，也必须是index。微信官方文档中是这样写的：使用 wx:for-index 可以指定数组当前下标的变量名默认数组的当前项的下标变量名默认为 index。

wxss代码

page{width: 100%;height: 100%;
}
.container{display: flex;flex-direction: column;height: 100%;
}.nav{width: 100%;height: 100rpx;background-color: skyblue;display: flex;flex-direction: row;justify-content: space-around;
}.item{font-size: 32rpx;color: #fff;height: 50rpx;width: 100rpx;line-height: 50rpx;align-self: center;text-align: center;
}.active{background-color: darkgray;border-radius: 10rpx;
}.list{width: 100%;height: 100%;display: flex;background-color: pink;
}.detail{margin: auto;
}

js代码

data: {current:0,newslist:[{text:'这是首页界面内容'},{text:'这是分类界面内容'},{text:'这是发现界面内容'},{text:'这是收藏界面内容'},{text:'这是我的界面内容'}]},onClick:function(event){var index = event.currentTarget.dataset.id;this.setData({current:index})},

点击导航按钮获取自定义属性值，并赋值于current。

其实使用轮播组件swiper也可以达到这样的效果，但是我觉得使在这样的场景使用轮播不太实际，这里就不说啦！

微信小程序导航栏切换页面相关推荐

如何去掉微信小程序导航栏，以及禁止页面滑动
如何去掉微信小程序导航栏,以及禁止页面滑动 1.微信小程序要去掉微信自带的导航栏,只需要在app.json中加上 "navigationStyle": "custom&q ...
微信小程序导航栏或菜单栏吸顶效果简单实现
微信小程序导航栏或菜单栏吸顶效果简单实现思路: 1.获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2.监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3.当s2> ...
微信小程序导航栏制作
导航栏制作微信小程序不同于H5,制作导航栏不方便,尤其是对于一个初学者来看:以为微信小程序中的Js与H5中的差不多,其实不然,以下就是我在学习微信小程序中制作的小程序导航栏. 页面代码 <vi ...
微信小程序导航栏高度。分析手机状态栏高度、微信小程序胶囊高度等。
//获取系统信息的概念 console.log(uni.getSystemInfoSync()); let res = uni.getSystemInfoSync() //胶囊按钮的信息 consol ...
微信小程序导航栏怎么写
微信小程序写到到导航栏还是非常简单得,就算没有三大框架的基础,也是非常容易理解`的. 接下来我们看看他是如何操作的: 以电商页面中常见的导航为例,会了这一种,就是会了很多种,到时根据具体需求改动即可: ...
微信小程序----导航栏透明渐变一（MUI导航栏透明渐变）
效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! DEMO下载导航栏透明渐变效果实现原理利用position:absolute在导航下定位一个v ...
微信小程序左右滑动切换页面（炫酷效果）以及点赞特效
#效果图 gif放不上来..我就直接口述了..需要看具体效果戳GitHub>>>>>demo地址首先左右滑动的时候整个页面会以动画效果切换(demo里是反转和水平淡出) ...
使用taro自定义微信小程序导航栏
1.在app.config.js中的window配置项的内容替换为:"navigationStyle":"custom" custom表示自定义导航栏,但会保留 ...
微信小程序----导航栏透明渐变二（MUI导航栏透明渐变）
效果体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 导航栏透明渐变效果实现原理给page-group设置的背景颜色采用rgba; 通过改变rgba其 ...

微信小程序导航栏切换页面

wxml代码

wxss代码

js代码

微信小程序导航栏切换页面相关推荐

最新文章

热门文章