微信小程序weui在线入门教程-WeUi导航相关-navbar

效果图

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

Js代码

  data: {tabs: ["选项一", "选项二", "选项三"],activeIndex: 1,sliderOffset: 0,sliderLeft: 0},onLoad: function () {var that = this;wx.getSystemInfo({success: function (res) {that.setData({sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex});}});},tabClick: function (e) {this.setData({sliderOffset: e.currentTarget.offsetLeft,activeIndex: e.currentTarget.id});},

wxml代码

<view class="page"><view class="page__bd"><view class="weui-tab"><view class="weui-navbar"><block wx:for="{{tabs}}" wx:key="*this"><view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick"><view class="weui-navbar__title">{{item}}</view></view></block><view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view></view><view class="weui-tab__panel"><view class="weui-tab__content" hidden="{{activeIndex != 0}}">选项一的内容</view><view class="weui-tab__content" hidden="{{activeIndex != 1}}">选项二的内容</view><view class="weui-tab__content" hidden="{{activeIndex != 2}}">选项三的内容</view></view></view></view>
</view>

欢迎大家学习我的视频课程：微信小程序-WeUI界面布局设计入门到精通

微信小程序weui在线入门教程-WeUi导航相关-navbar相关推荐

微信小程序weui在线入门教程-WeUi操作反馈-actionsheet弹出式菜单
效果图微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua wxml代码 <view class ...
微信小程序weui在线入门教程-WeUi表单组件-list列表
效果图微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua wxml代码 <view class ...
微信小程序云开发入门教程
小程序的云开发: 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 ...
微信小程序保姆级入门教程
一.微信小程序特点 -小程序依赖微信快,因为免去下载和安装小,一个包不能超过2M 强,微信有什么能力它也拥有广,传播微信圈子近10亿用户 QQ 微信支付宝字节跳动美团鸿蒙都有类似小程序 ...
微信小程序云开发入门教程-服务开通
我们在上篇教程里介绍了小程序账号注册及工具下载安装的功能,本篇我们介绍一下如何开通云开发. 步骤一:开通云开发打开微信开发者工具,可以看到工具栏里有个云开发的图标一开始我的这个图标是灰色的,提示已 ...
MOOC微信小程序开发从入门到实践~笔记
MOOC微信小程序开发从入门到实践~笔记 1.图标网站[icon]www.iconfont.cn 2.新建项目是必须需要AppID 3.app.js是页面逻辑文件 app.json是页面全局配置文件( ...
【微信小程序】从入门到放弃
前言关于微信小程序是什么,能做什么的问题,草民在此不在罗列了,随着小程序的天天刷屏,想必您也是来吃一些干货,本篇博文和大家走进微信小程序的从入门到放弃~ 微信小程序开放功能草民看过很多的文档,微信 ...
美团小程序框架mpvue入门教程
美团小程序框架mpvue入门教程自打写了美团小程序框架mpvue蹲坑指南, 一发不可收拾,今天趁周末空闲,来写个mpvue(没朋友)的简单入门教程,本教程只针对新手,老鸟勿喷. 另外,我还专门为本 ...
vue 美团框架_美团小程序框架mpvue入门教程
美团小程序框架mpvue入门教程本教程只针对新手,老鸟勿喷. 另外,我还专门为本文做了一个简单的项目,如果懒得从头开始搭项目的童鞋,可以直接去我的 github上克隆到本地, 安装一下依赖,即可直接 ...

微信小程序weui在线入门教程-WeUi导航相关-navbar

效果图

微信小程序weui在线入门教程-WeUi导航相关-navbar相关推荐

最新文章

热门文章