精华内容
下载资源
问答
  • 微信小程序标签栏tabBar

    万次阅读 2017-01-13 15:40:12
    微信小程序主页面大部分都定义了底部标签栏,定义一个标签栏只需要在app.json里做声明即可,代码如下: "tabBar": {  "color": "black",  "selectedColor": "red",  "borderStyle": "black",  "backgroundColor": ...

    微信小程序主页面大部分都定义了底部标签栏,定义一个标签栏只需要在app.json里做声明即可,代码如下:

    "tabBar": {
        "color": "black",
        "selectedColor": "red",
        "borderStyle": "black",
        "backgroundColor": "gray",
        "position": "bottom",
        "list": [
          {
            "text": "首页",
            "pagePath": "pages/index/index",
            "iconPath": "image/wechat.png",
            "selectedIconPath": "image/wechatHL.png"
          },
          {
            "text": "我的",
            "pagePath": "pages/mine/mine",
            "iconPath": "image/wechat.png",
            "selectedIconPath": "image/wechatHL.png"
          }
        ]
      }

    上面这段代码position设置为bottom,即为默认属性,展示在页面的底部,截图如下:

    若把position设置为top,状态栏即展示在小程序页面顶部,位于toolbar之下,截图如下:


    更多可参照官方文档,地址:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

    -------------------------------------------------------------- 官方资料----------------------------------------------------------------------------------


    tabBar

    如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

    Tip: 通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirectTo)所到达的页面,即使它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏。

    tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

    属性说明:

    属性类型必填默认值描述
    colorHexColor tab 上的文字默认颜色
    selectedColorHexColor tab 上的文字选中时的颜色
    backgroundColorHexColor tab 的背景色
    borderStyleStringblacktabbar上边框的颜色, 仅支持 black/white
    listArray tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
    positionStringbottom可选值 bottom、top

    其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:

    属性类型必填说明
    pagePathString页面路径,必须在 pages 中先定义
    textStringtab 上按钮文字
    iconPathString图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px
    selectedIconPathString选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px


    -------------------------------------------------------------- 官方资料----------------------------------------------------------------------------------

    展开全文
  • 微信小程序自定义标签栏(TabBar) 组件 支持无文字图标、大图标、悬浮图标等。 源码下载:https://github.com/tanggaowei/weapp-tabbar 自定义标签栏组件的代码在 /commpents/tabbar 目录下,可以直接复制到其他...

    微信小程序自定义标签栏(TabBar) 组件

    支持无文字图标、大图标、悬浮图标等。

    源码下载:https://github.com/tanggaowei/weapp-tabbar

    image

    自定义标签栏组件的代码在 /commpents/tabbar 目录下,可以直接复制到其他项目里使用。下面讲述使用方法。

    1、引用组件

    在需要使用标签栏的页面的 json 文件中,使用 usingComponents 配置项引用标签栏组件:

    {
      "usingComponents": {
        "tabbar": "/components/tabbar/tabbar"
      }
    }
    

    2、添加组件

    现在 wxml 文件里添加组件:

    <tabbar data="{{tabbar}}"></tabbar>
    

    然后在 js 文件中定义组件的数据,如 tabbar:

    Page({
      data: {
        tabbar: {
          "color": "#999999",
          "selectedColor": "#7788dd",
          "borderStyle": "#dcdcdc",
          "backgroundColor": "#ffffff",
          "list": [{
              "key": "home",
              "iconPath": "/images/icon_home.png",
              "selectedIconPath": "/images/icon_home_active.png",
              "text": "首页"
            },
            {
              "key": "tag",
              "iconPath": "/images/icon_tag.png",
              "selectedIconPath": "/images/icon_tag_active.png",
              "text": "标签"
            },
            {
              "key": "new",
              "iconPath": "/images/icon_plus_big.png",
              "iconType": "big overflow circle shadow",
              "choose": "disable"
            },
            {
              "key": "notebook",
              "iconPath": "/images/icon_notebook.png",
              "selectedIconPath": "/images/icon_notebook_active.png",
              "text": "日记本"
            },
            {
              "key": "me",
              "iconPath": "/images/icon_me.png",
              "selectedIconPath": "/images/icon_me_active.png",
              "text": "我"
            }
          ]
        }
      }
    })
    

    自定义标签栏组件的数据格式和小程序原始标签栏相同。这里重点讲述新属性 iconTypechoose 的使用。

    iconType 一共有4个值:bigoverflowcircleshadow。这四个值可以单独使用,也可以同时使用。同时使用时用空格隔开(实际上会被填写到对应标签的 class 属性中)。它们的作用如下:

    • big 使用大图标,将图标的宽和高设置为 95rpx,和标签栏的高相等;
    • overflow 将图标上移,使其一部分在标签栏外面显示;
    • circle 将图标的图片截取为圆形;
    • shadow 给图标加阴影。

    choose 属性一共有两个值:enable 和 disable,默认为 enable。当将其设置为 disable 时,点击该标签项将不会改变标签栏的选中状态,但仍然会触发 change 事件。

    3、监听切换事件

    使用 bindchange 属性绑定监听事件:

    <tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>
    

    然后在 Page() 中实现监听方法:

      tabChange: function(e) {
        var key = e.detail.key
        if (key == 'new') {
          wx.navigateTo({
            url: '/pages/new/new',
          })
        } else {
          this.setData({
            choose_index: e.detail.index
          })
        }
      }
    

    监听方法会得到两个数据:e.detail.keye.detail.index。其中 e.detail.key 对应数据 tabbar.list 数组元素的 key 值,不如上面的 home 、tag、new、notebook 和 me。e.detail.index 对应该数组元素的序号,如 0、1、2、3、4。

    4、实践方案

    1)自定义组件

    自定义组件类似于页面,拥有自己的 wxml 模版和 wxss 样式,便于逻辑与视图分离,比直接使用模板要好。下面是在 index.wxml 中使用自定义组件进行切换的示例代码:

    <home wx:if="{{choose_index==0}}"></home>
    <tag wx:if="{{choose_index==1}}"></tag>
    <notebook wx:if="{{choose_index==3}}"></notebook>
    <me wx:if="{{choose_index==4}}"></me>
    
    <tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>
    

    其中 <home><tag><notebook><me> 是 4 个自定义组件,分别实现各自的功能。

    2)使用模板

    使用模板也能实现切换效果,但是逻辑代码可能要写在同一个页面。例如:

    <import src='/template/home/home.wxml' />
    <import src='/template/tag/tag.wxml' />
    <import src='/template/notebook/notebook.wxml' />
    <import src='/template/me/me.wxml' />
    
    <template is="home" wx:if="{{choose_index==0}}"></template>
    <template is="tag" wx:if="{{choose_index==1}}"></template>
    <template is="notebook" wx:if="{{choose_index==3}}"></template>
    <template is="me" wx:if="{{choose_index==4}}"></template>
    
    <tabbar bindchange="tabChange" data="{{tabbar}}"></tabbar>
    

    3)导航和跳转

    可以在监听方法中使用 wx.navigateTo()wx.redirectTo() 接口切换页面内容。例如:

      tabChange: function(e) {
        var key = e.detail.key
        if (key == 'new') {
          wx.navigateTo({
            url: '/pages/new/new',
          })
        }
      }
    
    展开全文
  • 主要介绍了微信小程序导航滑动定位功能,可实现CSS3的positionsticky效果,涉及微信小程序事件监听、状态判断及属性动态操作相关实现技巧,需要的朋友可以参考下
  • PHP:【微信小程序】初识微信小程序微信小程序配置 一.介绍 小程序提供了一个简单、高效的应用开发框架和丰富的组件及 API,帮助开发者在微信中开发具有原生 APP 体验的服务 小程序是一种全新的连接用户与服务...

    PHP:【微信小程序】初识微信小程序,微信小程序配置
    一.介绍

    • 小程序提供了一个简单、高效的应用开发框架和丰富的组件及 API,帮助开发者在微信中开发具有原生 APP 体验的服务

    • 小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验

      二.速读

    • 微信小程序是腾讯公司旗下

    • 微信小程序只能在微信里打开

    • 微信小程序代码构成:WXML(html),WXSS(css),JS,JSON

    • 微信小程序文件构成:

      • .json后缀 JSON 配置文件
      • .wxml后缀 WXML 模板文件
      • .wxss后缀 WXSS 样式文件
      • .js后缀 小程序脚本逻辑文件
      • .wxs后缀 小程序脚本逻辑文件
    • 微信小程序上线后,请求项目接口必须是 https 协议

    • 微信小程序支持:微信支付、客服系统、插件

      三.整体架构介绍

    • 整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。小程序提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。

    • 1.视图层 View
      视图层由 WXML 与 WXSS 编写,由组件来进行展示
      WXML(WeiXin Markup language) 用于描述页面的结构
      WXSS(WeiXin Style Sheet) 用于描述页面的样式
      组件(Component)是视图的基本组成单元

    • 2.逻辑层 App Service
      小程序开发框架的逻辑层使用 JavaScript 引擎
      逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈
      框架 提供丰富的微信原生 API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,扫一扫,支付功能等
      提供模块化能力,每个页面有独立的作用域

    • 3.文件结构介绍

    文件名描述
    project.config.json此文件是配置微信开发者工具的,我们使用工具,无需去手动修改此文件
    sitemap.json微信索引文件,微信现已开放小程序内搜索,开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引
    app.js小程序逻辑
    app.json小程序公共配置
    app.wxss小程序公共样式表
    .js页面逻辑
    .wxml页面结构
    .json页面配置
    .wxss页面样式表
    • 一个小程序可以有很多页面,每个页面承载不同的功能,页面之间可以互相跳转
    • 一个页面由配置代码 JSON 文件、模板代码 WXML 文件、样式代码 WXSS 文件以及逻辑代码 JavaScript 文件组成

    wxchant 微信小程序根目录
    ├─pages 页面根目录
    │ ├─index index目录
    │ │ ├─index.json json配置文件
    │ │ ├─index.wxml wxml模版文件
    │ │ ├─index.wxss wxss样式文件
    │ │ └─index.js js逻辑事件文件
    │ │
    │ ├─logs logs目录
    │ │ ├─logs.json json配置文件
    │ │ ├─logs.wxml wxml模版文件
    │ │ ├─logs.wxss wxss样式文件
    │ └──└─logs.js js逻辑事件文件

    ├─utils 公共模块目录
    │ └─util.js 公共模块文件

    ├─app.json 公共json配置文件
    ├─app.wxss 公共wxss样式文件
    ├─app.js 小程序启动文件
    ├─project.config.json 开发者工具配置文件
    └─sitemap.json 微信索引配置文件

    四.配置

    • 1、全局配置
      小程序根目录下的 app.json 文件用来对微信小程序进行全局配置
    编号属性必填描述
    1entryPagePathstring小程序默认启动首页
    2pagesstring[]页面路径列表
    3windowObject全局的默认窗口
    4tabBarObject底部 tab 栏
    5debugboolean是否开启 debug 模式,默认关闭
    6stylestringv2 启用新版的组件样式
    7sitemapLocationstring指明 sitemap.json 索引文件的位置
    • pages 页面路径列表

    • 1.window 配置项
    编号属性类型默认值描述
    1navigationBarBackgroundColorHexColor000000导航栏背景颜色,如 000000
    2navigationBarTextStylestringwhite导航栏标题颜色,仅支持 black / white
    3navigationBarTitleTextstring导航栏标题文字内容
    4backgroundColorHexColorffffff窗口的背景色
    5backgroundTextStylestringdark下拉 loading 的样式,仅支持 dark / light
    • 导航栏标题文字内容

    • 2.tabBar 配置项

    |编号|属性|类型|必填|默认值|描述|
    |—|---|—|---|—|
    |1|color|HexColor|是| |tab 上的文字默认颜色,仅支持十六进制颜色|
    |2|selectedColor|HexColor|是| |tab 上的文字选中时的颜色,仅支持十六进制颜色|
    |3|backgroundColor|HexColor|是| |tab 的背景色,仅支持十六进制颜色|
    |4|borderStyle|string|否|black|tabbar 上边框的颜色, 仅支持 black / white|
    |5|list|Array|是| |tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab|
    |6|position|string|否|bottom|tabBar 的位置,仅支持 bottom / top|

    • 3.list 配置项
    编号属性类型必填描述
    1pagePathstring页面路径,必须在 pages 中先定义
    2textstringtab 上按钮文字
    3iconPathstring图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
    4selectedIconPathstring选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
    • 小程序字体按钮

    如果没有字体图标,建议去阿里云字体图标看看

    • 4.页面配置
    • 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置
    编号属性类型默认值描述
    1navigationBarBackgroundColorHexColor000000导航栏背景颜色
    2navigationBarTextStylestringwhite导航栏标题颜色,仅支持 black / white
    3navigationBarTitleTextstring导航栏标题文字内容
    • 页面单独配置json文件

      五.视图层

    • 视图层由 WXML 与 WXSS 编写,由组件来进行展示

      • WXML(WeiXin Markup language) 用于描述页面的结构
      • WXSS(WeiXin Style Sheet) 用于描述页面的样式
    • 组件(Component)是视图的基本组成单元

    • wxml 书写方式跟 html 非常相似

    • wxml 的组件有开始标签和结束标签,忘写结束标签会报错

    • wxml 的标签支持属性、事件

    • wxml 支持逻辑语法和条件判断

    • 1.什么是组件

    • 组件是视图层的基本组成单元。

    • 组件自带一些功能与微信风格一致的样式。

    • 一个组件通常包括 开始标签 和 结束标签,属性 用来修饰这个组件,内容 在两个标签之内。

    • 2.视图容器

    编号名称功能说明
    1cover-image覆盖在原生组件之上的图片视图
    2cover-view覆盖在原生组件之上的文本视图
    3match-mediamedia query 匹配检测节点
    4movable-areamovable-view 的可移动区域
    5movable-view可移动的视图容器,在页面中可以拖拽滑动
    6page-container页面容器
    7scroll-view可滚动视图区域
    8share-element共享元素
    9swiper滑块视图容器
    10swiper-item仅可放置在 swiper 组件中,宽高自动设置为 100%
    11view视图容器
    • 3.基础内容
    编号名称功能说明
    1icon图标
    2progress进度条
    3rich-text富文本
    4text文本
    • 4.表单组件
    编号名称功能说明
    1button按钮
    2checkbox多选项目
    3checkbox-group多项选择器,内部由多个 checkbox 组成
    4editor富文本编辑器,可以对图片、文字进行编辑
    5form表单
    6input输入框
    7keyboard-accessory设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图
    8label用来改进表单组件的可用性
    9picker从底部弹起的滚动选择器
    10picker-view嵌入页面的滚动选择器
    11picker-view-column滚动选择器子项
    12radio单选项目
    13radio-group单项选择器,内部由多个 radio 组成
    14slider滑动选择器
    15switch开关选择器
    16textarea多行输入框
    展开全文
  • 1、页面底部标签,每个页面都要使用,编写在app.json中tabbar color是字体颜色,selectedColor是被选中后字体的颜色,borderStyle边框样式,list数组:pagePath点击后跳转到的页面,iconPath图标地址,...

    1、页面底部标签,每个页面都要使用,编写在app.json中tabbar
    在这里插入图片描述
    color是字体颜色,selectedColor是被选中后字体的颜色,borderStyle边框样式,list数组:pagePath点击后跳转到的页面,iconPath图标地址,selectedIconPath被选中后图标地址,文字text。

    展开全文
  • 废话不多说,先上效果图 1. 先新建一个用来存放tabs的文件 tabs.wxml <scroll-view scroll-x="{{true}}" class="scroll" scroll-left="{{transscr}}" scroll-with-animation="{{true}}">...
  • 微信小程序-滑动标签页 说明: 实现滑动标签页功能,特色: tab滑动动画 tab滑动和内容滑动联动 数据接口: 使用本地数据 目录结构: pages — 存放项目页面文件 开发环境: 微信web开发者工具 v0.11.112301 ...
  • 微信小程序导航或菜单吸顶效果简单实现 思路: 1、获取导航初始位置距顶部的距离s1(通过获取页面标签方法) 2、监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3、当s2&gt;=s1时,给导航增加固定...
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • time: ['01:00', '01:00', '02:00', '01:00', '01:00', '01:00', '03:00', '01:00', '01:00', '01:00', '04:00', '05:00', '01:00', '06:00']
  • 从今天开始就来带领大家学习微信小程序了,只要你跟着我一步步来,相信你也可以上线一款属于自己的微信小程序 一,认识小程序 微信⼩程序,简称⼩程序,英⽂名 Mini Program Mini Program ,是⼀种不需要下载安装...
  • 效果 子组件WXML <view class="tabs"> <view class="tab-item" wx:for="{{tabList}}" wx:key="index" data-index="{{index}}" data-value="{{item}}" bindtap="changeTab">...
  • 微信小程序导航切换页面

    千次阅读 2020-04-11 17:34:04
    微信官方文档中是这样写的:使用 wx:for-index 可以指定数组当前下标的变量名 默认数组的当前项的下标变量名默认为 index。 wxss代码 page{ width: 100%; height: 100%; } .container{ display: flex; flex-...
  • 主要为大家详细介绍了微信小程序顶部导航滑动tab效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 用mpvue写微信小程序tab切换

    千次阅读 2019-01-15 16:08:33
    效果如下图: index.vue &lt;div class="test"&gt; &lt;div class="testNav"&gt; &lt;div :class="{'selected':tab === 1,'testTitle':true}"...
  • 在把开发工具从stable版改为nightly build版时,原本设定的导航颜色是#0056b9,在程序运行时,开始时变为#0056b9,然后瞬间变为红色??? 重新把开发版更新为稳定版后,问题依旧存在。 解决思路: 导航颜色...
  • wechatapp-swiper-tab

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,935
精华内容 3,974
关键字:

微信小程序标签栏

微信小程序 订阅