微信小程序weui在线入门教程-基础组件-badge徽章

效果图

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

Wxml代码

<view class="page"><view class="page__hd"><view class="page__title">Badge</view><view class="page__desc">徽章</view></view><view class="page__bd"><view class="weui-cells__title">新消息提示跟摘要信息后，统一在列表右侧</view><view class="weui-cells weui-cells_after-title"><view class="weui-cell weui-cell_access"><view class="weui-cell__bd">单行列表</view><view class="weui-cell__ft weui-cell__ft_in-access" style="font-size: 0"><view style="display: inline-block;vertical-align:middle; font-size: 17px;">详细信息</view><view class="weui-badge weui-badge_dot" style="margin-left: 5px;margin-right: 5px;"></view></view></view></view><view class="weui-cells__title">未读数红点跟在主题信息后，统一在列表左侧</view><view class="weui-cells weui-cells_after-title"><view class="weui-cell"><view class="weui-cell__hd" style="position: relative;margin-right: 10px;"><image src="/images/pic_160.png" style="width: 50px; height: 50px; display: block"/><view class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">8</view></view><view class="weui-cell__bd"><view>联系人名称</view><view style="font-size: 13px;color: #888888;">摘要信息</view></view></view><view class="weui-cell weui-cell_access"><view class="weui-cell__bd"><view style="display: inline-block; vertical-align: middle">单行列表</view><view class="weui-badge" style="margin-left: 5px;">8</view></view><view class="weui-cell__ft weui-cell__ft_in-access"></view></view><view class="weui-cell weui-cell_access"><view class="weui-cell__bd"><view style="display: inline-block; vertical-align: middle">单行列表</view><view class="weui-badge" style="margin-left: 5px;">8</view></view><view class="weui-cell__ft weui-cell__ft_in-access">详细信息</view></view><view class="weui-cell weui-cell_access"><view class="weui-cell__bd"><view style="display: inline-block; vertical-align: middle">单行列表</view><view class="weui-badge" style="margin-left: 5px;">New</view></view><view class="weui-cell__ft weui-cell__ft_in-access"></view></view></view></view></view>

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

微信小程序weui在线入门教程-基础组件-badge徽章相关推荐

微信小程序weui在线入门教程-WeUi操作反馈-actionsheet弹出式菜单
效果图微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua wxml代码 <view class ...
微信小程序weui在线入门教程-WeUi导航相关-navbar
效果图微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua Js代码 data: {tabs: [&q ...
微信小程序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(没朋友)的简单入门教程,本教程只针对新手,老鸟勿喷. 另外,我还专门为本 ...
微信小程序weui的引入及使用
微信小程序weui的引入及使用一.微信小程序引入WeUI组件库并使用组件 1. 通过useExtendedLib扩展库的方式引入(推荐使用) 2. 通过npm的方式引入(weui-miniprogr ...

微信小程序weui在线入门教程-基础组件-badge徽章

效果图

微信小程序weui在线入门教程-基础组件-badge徽章相关推荐

最新文章

热门文章