微信小程序基础组件与导航组件详细介绍

2024-12-19 13:32:18

微信小程序基础组件与导航组件详解：

1.基础组件

1.1 图标 icon

1.2 文本 text

1.3 进度条 progress

2.导航组件(navigator)

1.基础组件

1.1 图标 icon

(1)总结

(2) 案例

效果截图

page.wxml

<view class="type-group">
 <block wx:for="{{iconType}}">
  <icon type="{{item}}" size="40"/>
 </block>
</view>

page.js

//获取应用实例
var app = getApp()
Page({
 data:{
 iconType:[
  'success','success_circle','success_on_circle','waiting','waiting_circle','safe_success','safe_warn','warn','info',
  'info_circle','circle','download','cancel','search','clear'
 ]
 },
})

1.2 文本 text

(1) 案例

效果图

page.wxml

<view class="main">
 <view class="text-view">
  <text class="show-text">{{text}}</text>
 </view>
 <view class="bt-view">
  <button bindtap="addLine" class="show-text">{{add}}</button>
  <button bindtap="removeLine" class="show-text">{{remove}}</button>
 </view>
</view>

page.js

//获取应用实例
var app = getApp()
//定义额外的文本内容数组
var extraLine = [];
//初始化文本
var init='Initdata! \n'
Page({
 data:{
 text:init,
 add:'添加',
 remove:'删除'
 },
/*
*添加一行内容
 */
addLine:function(e){
 extraLine.push("This line is new add!")
 this.setData({
  text:init+extraLine.join('\n')
 })
},
/*
*删除一行内容
 */
removeLine:function(e){
 if (extraLine.length > 0) {
  extraLine.pop()
  this.setData({
  text:init + '\n' + extraLine.join('\n')
  })
 }
},
})

page.wxss

.show-text{
 font-size: 10pt;
 margin-left: 20rpx;
 font-family: 'Times New Roman', Times, serif;
 font-weight: bold;
}
.text-view{
 padding: 10rpx;
}
button{
 margin: 10rpx;
}

1.3 进度条 progress

(1)总结

(2)案例

效果图

page.wxml

<view class="progress-view">
 <progress percent="50"/>
 <progress percent="20" stroke-width="10" show-info/>
 <progress percent="40" color="#000"/>
 <progress percent="100" active/>
</view>

page.wxss

progress{
 margin: 50rpx;
}

2.导航组件(navigator)

(1) 总结

(2) 案例

效果图

main.wxml

<view class="nav-view">
 <navigator open-type="navigate" url="../navigator/navigator" class="nav-item" hover-class="nav-hover">导航到新页面</navigator>
 <navigator open-type="redirect" url="../navigator/navigator" class="nav-item" hover-class="nav-hover">当前页面</navigator>
 <navigator open-type="switchTab" url="../index/index" class="nav-item" hover-class="nav-hover">切换Tab</navigator>
</view>

main.wxss

.nav-hover{
 color: white;
 background-color: black;
}
.nav-item{
 margin: 20rpx;
 font-family: 'Times New Roman', Times, serif;
 font-weight: bold;
 padding: 10rpx;
 display: inline-flex;
}

navigator.wxml

<view class="info">导航到的新页面</view>

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序开发之顶部导航栏实例代码

微信小程序开发之顶部导航栏需求:顶部导航栏效果图: wxml:  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap=
微信小程序 wxapp导航 navigator详解

微信小程序 wxapp导航 navigator 最近微信小程序非常火,朋友圈,微博,论坛等地方都在刷屏,因为这是搞前端的春天,前端工程师可以赚一把了,所以业余就学习了微信小程序的知识,这里记录下 : navigator 属性名类型默认值说明 url String 应用内的跳转链接 redirect Boolean false 是否关闭当前页面 hover-class String navigator-hover 指定点击时的样式类,当hover-class="none"时,没
微信小程序底部导航栏目开发资料

微信小程序底部导航栏目开发我们先来看个效果图这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步就搞定! 1. 图标准备阿里图标库 http://www.iconfont.cn/collections/show/29 我们进入该网站,鼠标滑到一个喜欢的图标上面点击下方的下载按钮在弹出框中选择了俩个不同颜色的图标选择64px大小即可,我选择的是png 然后下载下来起上别名将上述起好名字的图标保存到小程序
微信小程序教程系列之设置标题栏和导航栏（7）

微信小程序标题栏和导航栏的设置方法,具体内容如下设置标题栏标题栏window 在app.json文件里面,通过window对象里面的属性进行设置示例: app.json: 运行: 设置导航栏导航栏TabBar 如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. Tip: 通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirect
微信小程序实战之顶部导航栏（选项卡）（1）

本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下需求:顶部导航栏效果图: wxml:  <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu
微信小程序（三）tabBar底部导航详细介绍

tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项主要属性: 对于tabBar整体属性设置: 对于tabBar中每个Item属性设置: 下面是官网一张图对tabBar描述: app.json的配置相对就简单了: 相关文章: hello WeApp icon组件 Window text组件
微信小程序中顶部导航栏的实现代码

微信小程序中顶部导航栏的实现实例代码: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> <view class="swiper-tab-list {{curre
微信小程序自定义导航隐藏和显示功能

微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便实现,能直接操作document.在微信小程序中实现思路是:在逻辑层定义变量,通过setData赋值. 方法一:通过变量直接赋值,给每一个要控制显示的view定义变量 .wxml 代码:  <view class="navView" bi
微信小程序（二）Window 配置详细介绍

window用于设置小程序的状态栏.导航条.标题.窗口背景色.注意在app.json中配置的属性会被子window属性覆盖只需在app.json配置即可相关文章: hello WeApp icon组件 Window text组件 switch组件 tabBar底部导航 progress组件
微信小程序基础组件与导航组件详细介绍

微信小程序基础组件与导航组件详解: 1.基础组件 1.1 图标 icon 1.2 文本 text 1.3 进度条 progress 2.导航组件(navigator) 1.基础组件 1.1 图标 icon (1)总结 (2) 案例效果截图 page.wxml <view class="type-group"> <block wx:for="{{iconType}}"> <icon type="{{item}}&qu
微信小程序实现YDUI的ScrollNav组件

本文实例为大家分享了微信小程序实现滚动导航效果的具体代码,供大家参考,具体内容如下 DEMO下载效果图实现原理采用双 scroll-view 组件实现双滚动! WXML  <scroll-view class="tui-city-scroll" scroll-x="true" scroll-into-view="NAV{{status}}" scroll-with-animation="t
微信小程序实现YDUI的ScrollTab组件

本文实例为大家分享了微信小程序实现滚动选项卡效果的具体代码,供大家参考,具体内容如下 DEMO下载效果图 YDUI的ScrollTab(滚动选项卡) WXML  <view class="tui-fixed-left"> <scroll-view class="tui-city-scroll" scroll-x="true"> <text bindtap="getStatu
微信小程序新手入门之自定义组件的使用

前言从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程.所有自定义组件相关特性都需要基础库版本 1.6.3 或更高. 开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护. 一.小程序的好处和特点 1.好处开发者:小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换:也能节约开发和推广成本. 用户:能够节约使用时间成本和手机内存空间.对于开发者
微信小程序获取用户头像昵称组件封装实例(最新版)

目录一.前言二.组件使用下载组件组件导入引用组件使用组件三.浅谈业务逻辑设置注意事项兼容性四.结语一.前言微信小程序将在2022年11月08日对获取用户头像昵称信息的API再一次进行改动,这次的改动比较大. 更多详情查看公告:公告直达链接我的项目比较多,而且大部分都是只需要获取用户的头像以及昵称,并不需要像官方的“最佳实践案例”那样,还需要用户设置其他信息.因此自己进行了一个组件封装,以弹窗形式让用户授权或设置头像以及昵称. 博客中也会浅谈一下该如何对新旧接口进行业务逻
微信小程序 select 下拉框组件功能

一.源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二.效果图录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. select.wxml <view class="select-box"> <view class="select-current" catchtap="openClose"> <text class="current-name
微信小程序可滑动周日历组件使用详解

微信小程序可滑动周日历组件,供大家参考,具体内容如下看网上周日历组件比较少,自己弄了一个,和大家分享一下. 如果样式变形,请检查是否有共用样式起冲突展示一下效果图在components组件文件夹下新建calendarWeek文件夹直接上代码吧: index.wxml   <view class="date-choose shrink border-bott
微信小程序可滑动月日历组件使用详解

微信小程序可滑动月日历组件此日历可进行左右滑动,展示签到打卡信息,和大家分享一下. 如果样式变形,请检查是否有共用样式起冲突展示一下效果图在components组件文件夹下新建calendarMonth文件夹直接上代码吧: index.wxml  <view class='month'> <!-- <view class='arrow' bindtap='prevMonth'><
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件

在微信小程序中,有遇到要展示店铺评分,或者是订单完成后对商品进行评价,用到了星星展示,查了下,在微信中无法使用svg实现图片,微信中只能将svg图片转成base64来显示,所以是在vue中使用的svg来实现评分 1.效果图微信中的可以点击及显示,但是,显示的话,在4.2分,4点多分的时候,显示的是半颗星 vue中用的是svg实现,所以用的是占比的形式,可以有一点点的星 2.微信实现店铺评分显示及商品评价星星展示子组件index.wxml,可以动态的控制星星的大小 <!-- (size * s

微信小程序 基础组件与导航组件详细介绍

相关推荐

随机推荐

微信小程序基础组件与导航组件详细介绍