添加代码
This commit is contained in:
何江明
+44
@@ -0,0 +1,44 @@
|
||||
"use strict";
|
||||
const uni_modules_uviewPlus_libs_vue = require("../../libs/vue.js");
|
||||
const uni_modules_uviewPlus_libs_config_props = require("../../libs/config/props.js");
|
||||
const props = uni_modules_uviewPlus_libs_vue.defineMixin({
|
||||
props: {
|
||||
// 显示的内容，字符串
|
||||
text: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.rowNotice.text
|
||||
},
|
||||
// 是否显示左侧的音量图标
|
||||
icon: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.rowNotice.icon
|
||||
},
|
||||
// 通告模式，link-显示右箭头，closable-显示右侧关闭图标
|
||||
mode: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.rowNotice.mode
|
||||
},
|
||||
// 文字颜色，各图标也会使用文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.rowNotice.color
|
||||
},
|
||||
// 背景颜色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.rowNotice.bgColor
|
||||
},
|
||||
// 字体大小，单位px
|
||||
fontSize: {
|
||||
type: [String, Number],
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.rowNotice.fontSize
|
||||
},
|
||||
// 水平滚动时的滚动速度，即每秒滚动多少px(rpx)，这有利于控制文字无论多少时，都能有一个恒定的速度
|
||||
speed: {
|
||||
type: [String, Number],
|
||||
default: () => uni_modules_uviewPlus_libs_config_props.defProps.rowNotice.speed
|
||||
}
|
||||
}
|
||||
});
|
||||
exports.props = props;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uview-plus/components/u-row-notice/props.js.map
|
||||
Vendored
+159
@@ -0,0 +1,159 @@
|
||||
"use strict";
|
||||
const uni_modules_uviewPlus_components_uRowNotice_props = require("./props.js");
|
||||
const uni_modules_uviewPlus_libs_mixin_mpMixin = require("../../libs/mixin/mpMixin.js");
|
||||
const uni_modules_uviewPlus_libs_mixin_mixin = require("../../libs/mixin/mixin.js");
|
||||
const uni_modules_uviewPlus_libs_function_index = require("../../libs/function/index.js");
|
||||
const uni_modules_uviewPlus_libs_function_test = require("../../libs/function/test.js");
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
name: "u-row-notice",
|
||||
mixins: [uni_modules_uviewPlus_libs_mixin_mpMixin.mpMixin, uni_modules_uviewPlus_libs_mixin_mixin.mixin, uni_modules_uviewPlus_components_uRowNotice_props.props],
|
||||
data() {
|
||||
return {
|
||||
animationDuration: "0",
|
||||
// 动画执行时间
|
||||
animationPlayState: "paused",
|
||||
// 动画的开始和结束执行
|
||||
// nvue下，内容发生变化，导致滚动宽度也变化，需要标志为是否需要重新计算宽度
|
||||
// 不能在内容变化时直接重新计算，因为nvue的animation模块上一次的滚动不是刚好结束，会有影响
|
||||
nvueInit: true,
|
||||
show: true
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
text: {
|
||||
immediate: true,
|
||||
handler(newValue, oldValue) {
|
||||
this.vue();
|
||||
if (!uni_modules_uviewPlus_libs_function_test.test.string(newValue)) {
|
||||
uni_modules_uviewPlus_libs_function_index.error("noticebar组件direction为row时，要求text参数为字符串形式");
|
||||
}
|
||||
}
|
||||
},
|
||||
fontSize() {
|
||||
this.vue();
|
||||
},
|
||||
speed() {
|
||||
this.vue();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 文字内容的样式
|
||||
textStyle() {
|
||||
let style = {};
|
||||
style.whiteSpace = "nowrap !important";
|
||||
style.color = this.color;
|
||||
style.fontSize = uni_modules_uviewPlus_libs_function_index.addUnit(this.fontSize);
|
||||
return style;
|
||||
},
|
||||
animationStyle() {
|
||||
let style = {};
|
||||
style.animationDuration = this.animationDuration;
|
||||
style.animationPlayState = this.animationPlayState;
|
||||
return style;
|
||||
},
|
||||
// 内部对用户传入的数据进一步分割，放到多个text标签循环，否则如果用户传入的字符串很长（100个字符以上）
|
||||
// 放在一个text标签中进行滚动，在低端安卓机上，动画可能会出现抖动现象，需要分割到多个text中可解决此问题
|
||||
innerText() {
|
||||
let result = [], len = 20;
|
||||
const textArr = this.text.split("");
|
||||
for (let i = 0; i < textArr.length; i += len) {
|
||||
result.push(textArr.slice(i, i + len).join(""));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
emits: ["click", "close"],
|
||||
methods: {
|
||||
init() {
|
||||
this.vue();
|
||||
if (!uni_modules_uviewPlus_libs_function_test.test.string(this.text)) {
|
||||
uni_modules_uviewPlus_libs_function_index.error("noticebar组件direction为row时，要求text参数为字符串形式");
|
||||
}
|
||||
},
|
||||
// vue版处理
|
||||
async vue() {
|
||||
let textWidth = 0;
|
||||
await uni_modules_uviewPlus_libs_function_index.sleep();
|
||||
textWidth = (await this.$uGetRect(".u-notice__content__text")).width;
|
||||
(await this.$uGetRect(".u-notice__content")).width;
|
||||
this.animationDuration = `${textWidth / uni_modules_uviewPlus_libs_function_index.getPx(this.speed)}s`;
|
||||
this.animationPlayState = "paused";
|
||||
setTimeout(() => {
|
||||
this.animationPlayState = "running";
|
||||
}, 10);
|
||||
},
|
||||
// nvue版处理
|
||||
async nvue() {
|
||||
},
|
||||
loopAnimation(textWidth, boxWidth) {
|
||||
},
|
||||
getNvueRect(el) {
|
||||
},
|
||||
// 点击通告栏
|
||||
clickHandler(index) {
|
||||
this.$emit("click");
|
||||
},
|
||||
// 点击右侧按钮，需要判断点击的是关闭图标还是箭头图标
|
||||
close() {
|
||||
this.$emit("close");
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.stopAnimation = true;
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _easycom_u_icon2 = common_vendor.resolveComponent("u-icon");
|
||||
_easycom_u_icon2();
|
||||
}
|
||||
const _easycom_u_icon = () => "../u-icon/u-icon.js";
|
||||
if (!Math) {
|
||||
_easycom_u_icon();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: _ctx.icon
|
||||
}, _ctx.icon ? {
|
||||
b: common_vendor.p({
|
||||
name: _ctx.icon,
|
||||
color: _ctx.color,
|
||||
size: "19"
|
||||
})
|
||||
} : {}, {
|
||||
c: common_vendor.f($options.innerText, (item, index, i0) => {
|
||||
return {
|
||||
a: common_vendor.t(item),
|
||||
b: index
|
||||
};
|
||||
}),
|
||||
d: common_vendor.s($options.textStyle),
|
||||
e: common_vendor.s($options.animationStyle),
|
||||
f: ["link", "closable"].includes(_ctx.mode)
|
||||
}, ["link", "closable"].includes(_ctx.mode) ? common_vendor.e({
|
||||
g: _ctx.mode === "link"
|
||||
}, _ctx.mode === "link" ? {
|
||||
h: common_vendor.p({
|
||||
name: "arrow-right",
|
||||
size: 17,
|
||||
color: _ctx.color
|
||||
})
|
||||
} : {}, {
|
||||
i: _ctx.mode === "closable"
|
||||
}, _ctx.mode === "closable" ? {
|
||||
j: common_vendor.o($options.close),
|
||||
k: common_vendor.p({
|
||||
name: "close",
|
||||
size: 16,
|
||||
color: _ctx.color
|
||||
})
|
||||
} : {}) : {}, {
|
||||
l: common_vendor.o((...args) => $options.clickHandler && $options.clickHandler(...args))
|
||||
});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ab8dee7b"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/uview-plus/components/u-row-notice/u-row-notice.js.map
|
||||
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"u-icon": "../u-icon/u-icon"
|
||||
}
|
||||
}
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
<view class="u-notice data-v-ab8dee7b" bindtap="{{l}}"><block wx:if="{{$slots.icon}}"><slot name="icon"></slot></block><block wx:else><view wx:if="{{a}}" class="u-notice__left-icon data-v-ab8dee7b"><u-icon wx:if="{{b}}" class="data-v-ab8dee7b" u-i="ab8dee7b-0" bind:__l="__l" u-p="{{b}}"></u-icon></view></block><view class="u-notice__content data-v-ab8dee7b" ref="u-notice__content"><view ref="u-notice__content__text" class="u-notice__content__text data-v-ab8dee7b" style="{{e}}"><text wx:for="{{c}}" wx:for-item="item" wx:key="b" class="data-v-ab8dee7b" style="{{d}}">{{item.a}}</text></view></view><view wx:if="{{f}}" class="u-notice__right-icon data-v-ab8dee7b"><u-icon wx:if="{{g}}" class="data-v-ab8dee7b" u-i="ab8dee7b-1" bind:__l="__l" u-p="{{h}}"></u-icon><u-icon wx:if="{{i}}" class="data-v-ab8dee7b" bindclick="{{j}}" u-i="ab8dee7b-2" bind:__l="__l" u-p="{{k}}"></u-icon></view></view>
|
||||
Vendored
+89
@@ -0,0 +1,89 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/* uni.scss */
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
.u-empty.data-v-ab8dee7b,
|
||||
.u-empty__wrap.data-v-ab8dee7b,
|
||||
.u-tabs.data-v-ab8dee7b,
|
||||
.u-tabs__wrapper.data-v-ab8dee7b,
|
||||
.u-tabs__wrapper__scroll-view-wrapper.data-v-ab8dee7b,
|
||||
.u-tabs__wrapper__scroll-view.data-v-ab8dee7b,
|
||||
.u-tabs__wrapper__nav.data-v-ab8dee7b,
|
||||
.u-tabs__wrapper__nav__line.data-v-ab8dee7b,
|
||||
.up-empty.data-v-ab8dee7b,
|
||||
.up-empty__wrap.data-v-ab8dee7b,
|
||||
.up-tabs.data-v-ab8dee7b,
|
||||
.up-tabs__wrapper.data-v-ab8dee7b,
|
||||
.up-tabs__wrapper__scroll-view-wrapper.data-v-ab8dee7b,
|
||||
.up-tabs__wrapper__scroll-view.data-v-ab8dee7b,
|
||||
.up-tabs__wrapper__nav.data-v-ab8dee7b,
|
||||
.up-tabs__wrapper__nav__line.data-v-ab8dee7b {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
flex-basis: auto;
|
||||
align-items: stretch;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.u-notice.data-v-ab8dee7b {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.u-notice__left-icon.data-v-ab8dee7b {
|
||||
align-items: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.u-notice__right-icon.data-v-ab8dee7b {
|
||||
margin-left: 5px;
|
||||
align-items: center;
|
||||
}
|
||||
.u-notice__content.data-v-ab8dee7b {
|
||||
text-align: right;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.u-notice__content__text.data-v-ab8dee7b {
|
||||
font-size: 14px;
|
||||
color: #f9ae3d;
|
||||
padding-left: 100%;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
animation: u-loop-animation-ab8dee7b 10s linear infinite both;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
line-height: 100%;
|
||||
}
|
||||
@keyframes u-loop-animation-ab8dee7b {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user