微信小程序 navbar

背景：navbar在小程序中的出镜率是很高的，哦应该说是在移动应用中。那么我们怎么去做一个navbar 这里我们当然可以使用微信小程序提供的weUI组件，本身就自带的。如果item较少使用体验上是妥妥的，但是item增多了就变成下面这个鬼样子了。好了咱自己来弄一个好了。

wxml布局：

<view class="contain"><scroll-view scroll-x class="itemscroll" scroll-into-view="{{targetview}}" scroll-with-animation='true'><view wx:for="{{items}}" wx:for-item="itemname" class='itemcontain' wx:key="*this"><view id="item{{index}}" bindtap="itemClick" class="item {{currentIndex==index?'active_txt':''}}"><text>{{itemname}}</text><view class="bottomline {{currentIndex==index?'active':''}}"></view></view></view></scroll-view>
<!--swiper组件--><swiper current='{{page_index}}' bindchange='page_change' skip-hidden-item-layout='true' easing-function='linear'><swiper-item >itemone</swiper-item><swiper-item>itemtwo</swiper-item><swiper-item >itemtree</swiper-item><swiper-item>itemfour</swiper-item><swiper-item >itemfive</swiper-item><swiper-item>itemsix</swiper-item><swiper-item>itemseven</swiper-item><swiper-item>itemeight</swiper-item><swiper-item>itemnine</swiper-item><swiper-item>itemten</swiper-item></swiper>
</view>

wxss样式表文件：

.page{width: 100%;height: 100%;
}
.contain{width: 100%;height: 100%;
}
.itemscroll{height:80rpx;white-space:nowrap;display:flex;
}
::-webkit-scrollbar{width: 0;height: 0;color: transparent;
}
.item{font-size: 12pt;
}
.itemcontain{display:inline-block;border-left: 1rpx #ccc solid;padding-left: 10rpx;padding-right: 10rpx;
}
.bottomline{width: 100%;margin-top: 10rpx;height: 5rpx;
}
.active{background-color: #fa0;color: white
}
.active_txt{color: #fa0
}

js文件

var sliderWidth = 96
Page({/*** 页面的初始数据*/data: {windowwidth:375,currentIndex:0,page_index:0,items:["itemone","itemtow","itemtree","itemfour","itemfive","itemsix","itemseven","itemeight","itemnine","itemten"],sliderLeft:0,sliderOffset:0,targetview:""},/*** itemtab点击事件* */itemClick:function(options){var index =  options.currentTarget.idvar index = index.substr(4)this.setData({currentIndex:index,page_index:index,targetview: "item" + index})},/*** swiper奇幻事件* */page_change:function(options){var type = options.detail.source;if(type === 'touch'){this.setData({currentIndex:options.detail.current,targetview:"item"+options.detail.current})console.log(this.data.targetview)}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {let that = thiswx.getSystemInfo({success: function (res) {that.setData({windowwidth:res.windowWidth,sliderLeft: (res.windowWidth / that.data.items.length - sliderWidth) / 2,sliderOffset: res.windowWidth / that.data.items.length * that.data.activeIndex});}});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

效果图：

微信小程序 navbar相关推荐

微信小程序-自定义NavBar组件
组件化组件化本身是一个可以讲的很大,也可以浓缩为封装可复用的,模版组件基于mvvm的微信小程序当然也支持这一特性,我们做项目的时候也可以把注入公用的header footer之类的封一封(其实工 ...
微信小程序weui在线入门教程-WeUi导航相关-navbar
效果图微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua Js代码 data: {tabs: [&q ...
前端微信小程序实战篇
电商底部导航栏的制作我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页.分类.购物车.个人中心. app.json是用来配置page路径以及导航栏属性的,那我们要做首页.分类.购物车.个人 ...
微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
ithoughts怎么自定义样式_微信小程序自定义导航栏组件封装
相信很多小伙伴在开发微信小程序的时候都会有自定义顶部导航栏的需求,不够要说明的是小程序右上角的胶囊是不能自定义的哦,除了胶囊其他地方都是可以根据自己的项目而定了,在一次小程序开发中就需要对顶部进行自定 ...
微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
微信小程序开发手账从入门到部署【持续更新】
微信小程序开发手账从今天起,打算记录一下自己从入门开发微信小程序到小程序上线的完整流程. 如果没有意外的话打算每周更新一次.20201231 准备工作 hbuilder.java环境(springb ...
微信小程序生成小程序码 + Java后台
微信小程序生成小程序码首先看下效果图: 微信小程序已经上线很久了.现在才开始把代码拷进来因为真的很忙 ---- 先看代码吧.首先是小程序端的内容: 怕麻烦全部拷进去吧这块的需求就是完成分享小 ...
微信小程序----返回上一页刷新或当前页刷新
WXRUI体验二维码如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 声明 bug: 在onShow中执行this.onLoad(),会导致页面第一次加载的时候数组 ...

微信小程序 navbar

微信小程序 navbar相关推荐

最新文章

热门文章