提交 be693ec6 编写于 作者: X xushengni

feat: weui-wxss v2.5.2

上级 c5558d51
### v2.5.2 (2021-11-29)
#### Features
* feat: 升级article组件UI
* feat: 底部悬浮按钮、半屏弹窗按钮支持垂直布局
* feat: 新增transition模态显示动画
#### Bugfixes
* fix: 表单组件验证码同意协议复选框优化无障碍体验
* fix: navigation组件返回按钮热区不足44px
* fix: 调整gallery组件底部安全间距、删除按钮增加点击态
* fix: 修复小程序slideview按钮宽度问题
* fix: actionsheet组件适配刘海屏
* fix: a11y热区去掉冗余背景声明
* fix: 修复图标按钮整合
* fix: 表单同意协议居中布局
* fix: 提高weui icon组件的选择器权重,用来规避和weui-icon混搭使用的权重问题
### v2.5.1 (2021-10-11)
#### Features
* feat: 新增关怀模式色板
* feat: 半屏弹窗组件UI升级
* feat: 升级按钮loading UI
* feat: msg组件标题字重调整
* feat: article新增无障碍整合焦点例子
### v2.5.0 (2021-09-17)
#### Features
......
require('./libs/Mixins.js');
const themeListeners = [];
const listeners = [];
App({
globalData: {
theme: 'light', // dark
},
themeChanged(theme) {
this.globalData.theme = theme;
themeListeners.forEach((listener) => {
listener(theme);
});
},
watchThemeChange(listener) {
if (themeListeners.indexOf(listener) < 0) {
themeListeners.push(listener);
}
},
unWatchThemeChange(listener) {
const index = themeListeners.indexOf(listener);
if (index > -1) {
themeListeners.splice(index, 1);
}
},
});
\ No newline at end of file
globalData: {
theme: 'light', // dark
mode: '', // 模式(care:关怀模式)
},
changeGlobalData(data) {
this.globalData = Object.assign({}, this.globalData, data);
listeners.forEach((listener) => {
listener(this.globalData);
});
},
watchGlobalDataChanged(listener) {
if (listeners.indexOf(listener) < 0) {
listeners.push(listener);
}
},
unWatchGlobalDataChanged(listener) {
const index = listeners.indexOf(listener);
if (index > -1) {
listeners.splice(index, 1);
}
},
onThemeChange(resp) {
this.changeGlobalData({
theme: resp.theme,
});
},
onLaunch() {
// TODO: 检测适老化
},
});
因为 它太大了无法显示 source diff 。你可以改为 查看blob
Page({
mixins: [require('../../mixin/themeChanged')],
data: {
showIOSDialog: false,
showAndroidDialog: false,
},
close: function() {
this.setData({
showIOSDialog: false,
showAndroidDialog: false
});
},
openIOS: function () {
this.setData({
showIOSDialog: true
});
},
openAndroid: function () {
this.setData({
showAndroidDialog: true
});
}
mixins: [require('../../mixin/common')],
data: {
showIOSDialog: false,
showAndroidDialog: false,
},
close() {
this.setData({
showIOSDialog: false,
showAndroidDialog: false,
});
},
openIOS() {
this.setData({
showIOSDialog: true,
});
},
openAndroid() {
this.setData({
showAndroidDialog: true,
});
},
});
<page-meta root-font-size="system"/>
<view class="page" data-weui-theme="{{theme}}">
<view class="page" data-weui-theme="{{theme}}" data-weui-mode="{{mode}}">
<view aria-hidden="{{showIOSDialog || showAndroidDialog ? true : false}}" class="page__hd">
<view class="page__title">ActionSheet</view>
<view class="page__desc">弹出式菜单</view>
......
/*!
* WeUI v2.5.0 (https://github.com/weui/weui-wxss)
* WeUI v2.5.2 (https://github.com/weui/weui-wxss)
* Copyright 2021 Tencent, Inc.
* Licensed under the MIT license
*/
......
Page({
mixins: [require('../../mixin/themeChanged')],
});
\ No newline at end of file
mixins: [require('../../mixin/common')],
});
<page-meta root-font-size="system"/>
<view class="page" data-weui-theme="{{theme}}">
<view class="page__hd">
<view class="page__title">Article</view>
<view class="page__desc">文章</view>
</view>
<view class="page__bd">
<view class="weui-article">
<view class="weui-article__h1">大标题</view>
<view class="weui-article__section">
<view class="weui-article__h2">章标题</view>
<view class="weui-article__section">
<view class="weui-article__h3">1.1 节标题</view>
<view class="weui-article__p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</view>
<view class="weui-article__p">
<image class="weui-article__img" src="../images/pic_article.png" mode="aspectFit" style="height: 180px" />
<image class="weui-article__img" src="../images/pic_article.png" mode="aspectFit" style="height: 180px" />
</view>
<view class="page" data-weui-theme="{{theme}}" data-weui-mode="{{mode}}">
<view class="weui-article">
<view aria-role="heading" aria-level="4" class="weui-article__h1">大标题</view>
<view class="weui-article__section">
<view class="weui-article__h2">章标题</view>
<view class="weui-article__section">
<view class="weui-article__h3">1.1 节标题</view>
<view class="weui-article__p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</view>
<view class="weui-article__p">
<image class="weui-article__img" src="../images/pic_article.png" mode="aspectFit" style="height: 180px;" />
<image class="weui-article__img" src="../images/pic_article.png" mode="aspectFit" style="height: 180px;" />
</view>
</view>
<view class="weui-article__section">
<view class="weui-article__h3">1.2 节标题</view>
<view class="weui-article__section">
<view class="weui-article__h4">1.2.1 小节标题</view>
<view class="weui-article__p">
<view class="weui-a11y-combo">
<view class="weui-a11y-combo__helper" aria-labelledby="txt1 txt2" readonly aria-role="option"></view>
<text id="txt1" class="weui-a11y-combo__content" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit</text>
<navigator id="txt2" class="weui-a11y-combo__content weui-link weui-wa-hotarea">read more</navigator>
</view>
</view>
<view class="weui-article__section">
<view class="weui-article__h3">1.2 节标题</view>
<view class="weui-article__p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</view>
</view>
<view class="weui-article__section">
<view class="weui-article__h4">1.2.1 小节标题</view>
<view class="weui-article__p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
/*!
* WeUI v2.5.0 (https://github.com/weui/weui-wxss)
* WeUI v2.5.2 (https://github.com/weui/weui-wxss)
* Copyright 2021 Tencent, Inc.
* Licensed under the MIT license
*/
......
Page({
mixins: [require('../../mixin/themeChanged')],
});
\ No newline at end of file
mixins: [require('../../mixin/common')],
});
<page-meta root-font-size="system"/>
<view class="page" data-weui-theme="{{theme}}">
<view class="page" data-weui-theme="{{theme}}" data-weui-mode="{{mode}}">
<view class="page__hd">
<view class="page__title">Badge</view>
<view class="page__desc">徽章</view>
......
/*!
* WeUI v2.5.0 (https://github.com/weui/weui-wxss)
* WeUI v2.5.2 (https://github.com/weui/weui-wxss)
* Copyright 2021 Tencent, Inc.
* Licensed under the MIT license
*/
......
Page({
mixins: [require('../../mixin/themeChanged')],
openDefault: function () {
wx.navigateTo({
url: 'button_default'
})
},
openBottomfixed: function () {
wx.navigateTo({
url: 'button_bottom_fixed'
})
},
mixins: [require('../../mixin/common')],
openDefault() {
wx.navigateTo({
url: 'button_default',
});
},
openBottomfixed() {
wx.navigateTo({
url: 'button_bottom_fixed',
});
},
});
<page-meta root-font-size="system"/>
<view class="page" data-weui-theme="{{theme}}">
<view class="page" data-weui-theme="{{theme}}" data-weui-mode="{{mode}}">
<view class="page__hd">
<view class="page__title">Button</view>
<view class="page__desc">按钮</view>
</view>
<view class="page__bd">
<view class="weui-btn-area">
<view aria-role="button" class="weui-btn weui-btn_default" bindtap="openDefault">普通按钮</view>
<view aria-role="button" class="weui-btn weui-btn_default" bindtap="openBottomfixed">底部悬浮按钮</view>
<view aria-role="button" class="weui-btn weui-btn_default" bindtap="openDefault">普通</view>
<view aria-role="button" class="weui-btn weui-btn_default" bindtap="openBottomfixed">底部悬浮</view>
</view>
</view>
</view>
......
/*!
* WeUI v2.5.0 (https://github.com/weui/weui-wxss)
* WeUI v2.5.2 (https://github.com/weui/weui-wxss)
* Copyright 2021 Tencent, Inc.
* Licensed under the MIT license
*/
......
Page({
mixins: [require('../../mixin/themeChanged')],
});
\ No newline at end of file
mixins: [require('../../mixin/common')],
data: {
wrap: false,
},
onShow() {
wx.createSelectorQuery().select('#js_btn')
.boundingClientRect((rect) => {
if (rect.height > 48) {