mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-06-08 23:33:17 +08:00
v2.0.6
1.修复行距带来的垂直不居中问题 2.优化操作条组件，新增多种样式 3.优化背景颜色（某些组件的默认背景调整,移除一些important） 4.更新动画扩展5.优化按钮,标签,头像的大小
This commit is contained in:
Weilanwl
@@ -1,66 +1,84 @@
|
||||
// pages/about/home/home.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
Component({
|
||||
data: {
|
||||
|
||||
starCount: 0,
|
||||
forksCount: 0,
|
||||
visitTotal: 0,
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
|
||||
methods: {
|
||||
onLoad(options) {
|
||||
let that = this;
|
||||
wx.showLoading({
|
||||
title: '数据加载中',
|
||||
mask: true,
|
||||
})
|
||||
let i = 0;
|
||||
numDH();
|
||||
function numDH() {
|
||||
if (i < 20) {
|
||||
setTimeout(function() {
|
||||
that.setData({
|
||||
visitTotal: i,
|
||||
forksCount: i,
|
||||
visitTotal: i
|
||||
})
|
||||
i++
|
||||
numDH();
|
||||
}, 20)
|
||||
} else {
|
||||
that.setData({
|
||||
starCount: that.coutNum(999),
|
||||
forksCount: that.coutNum(8888),
|
||||
visitTotal: that.coutNum(77777)
|
||||
})
|
||||
}
|
||||
}
|
||||
wx.hideLoading()
|
||||
},
|
||||
coutNum(e) {
|
||||
if (e > 1000 && e < 10000) {
|
||||
e = (e / 1000).toFixed(1) + 'k'
|
||||
}
|
||||
if (e > 10000) {
|
||||
e = (e / 10000).toFixed(1) + 'W'
|
||||
}
|
||||
return e
|
||||
},
|
||||
CopyLink(e) {
|
||||
wx.setClipboardData({
|
||||
data: e.currentTarget.dataset.link,
|
||||
success: res => {
|
||||
wx.showToast({
|
||||
title: '已复制',
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
showModal(e) {
|
||||
this.setData({
|
||||
modalName: e.currentTarget.dataset.target
|
||||
})
|
||||
},
|
||||
hideModal(e) {
|
||||
this.setData({
|
||||
modalName: null
|
||||
})
|
||||
},
|
||||
showQrcode() {
|
||||
wx.previewImage({
|
||||
urls: ['https://image.weilanwl.com/color2.0/zanCode.jpg'],
|
||||
current: 'https://image.weilanwl.com/color2.0/zanCode.jpg' // 当前显示图片的http链接
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
|
||||
pageLifetimes: {
|
||||
show() {
|
||||
if (typeof this.getTabBar === 'function' &&
|
||||
this.getTabBar()) {
|
||||
this.getTabBar().setData({
|
||||
selected: 3
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,3 +1 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
{}
|
||||
@@ -1,2 +1,80 @@
|
||||
<!--pages/about/home/home.wxml-->
|
||||
<text>pages/about/home/home.wxml</text>
|
||||
<view class='UCenter-bg'>
|
||||
<image src='/images/logo.png' class='png' mode='widthFix'></image>
|
||||
<view class='text-xl'>ColorUI组件库
|
||||
<text class='text-df'>v2.0</text>
|
||||
</view>
|
||||
<view class='margin-top-sm'>
|
||||
<text>By:文晓港</text>
|
||||
</view>
|
||||
<image src='https://image.weilanwl.com/gif/wave.gif' mode='scaleToFill' class='gif-wave'></image>
|
||||
</view>
|
||||
<view class='padding flex text-center text-grey bg-white shadow-warp'>
|
||||
<view class='flex flex-sub flex-direction solid-right'>
|
||||
<view class="text-xxl text-orange">{{visitTotal}}</view>
|
||||
<view class="margin-top-sm">
|
||||
<text class='icon-attentionfill'></text> View</view>
|
||||
</view>
|
||||
<view class='flex flex-sub flex-direction solid-right'>
|
||||
<view class="text-xxl text-blue">{{starCount}}</view>
|
||||
<view class="margin-top-sm">
|
||||
<text class='icon-favorfill'></text> Star</view>
|
||||
</view>
|
||||
<view class='flex flex-sub flex-direction'>
|
||||
<view class="text-xxl text-green">{{forksCount}}</view>
|
||||
<view class="margin-top-sm">
|
||||
<text class='icon-fork'></text> Fork</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
|
||||
<view class="cu-item arrow">
|
||||
<view class='content' bindtap='CopyLink' data-link='https://github.com/weilanwl/ColorUI'>
|
||||
<text class='icon-github text-grey'></text>
|
||||
<text class='text-grey'>GitHub</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item arrow">
|
||||
<navigator class='content' url='../about/about' hover-class='none'>
|
||||
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
|
||||
<text class='text-grey'>关于ColorUI组件库</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="cu-item arrow">
|
||||
<navigator class='content' url='../log/log' hover-class='none'>
|
||||
<text class='icon-formfill text-green'></text>
|
||||
<text class='text-grey'>日志</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<view class="cu-item arrow">
|
||||
<view class='content' bindtap="showQrcode">
|
||||
<text class='icon-appreciatefill text-red'></text>
|
||||
<text class='text-grey'>赞赏支持</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-item arrow">
|
||||
<button class='cu-btn content' open-type='feedback'>
|
||||
<text class='icon-writefill text-cyan'></text>
|
||||
<text class='text-grey'>意见反馈</text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="cu-item arrow">
|
||||
<navigator class='content' url='../test/list' hover-class='none'>
|
||||
<text class='icon-creativefill text-orange'></text>
|
||||
<text class='text-grey'>Bug测试</text>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-modal {{modalName=='QrcodeModal'?'show':''}}">
|
||||
<view class="cu-dialog">
|
||||
<view class="bg-img" style="background-image: url('https://image.weilanwl.com/color2.0/zanCode.jpg');height:544rpx;">
|
||||
<view class="cu-bar justify-end none-bg text-white">
|
||||
<view class='action' bindtap='hideModal'>
|
||||
<text class='icon-close '></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar">
|
||||
<view class='justify-center flex-sub' bindtap='SaveQrcode'>保存到相册</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -1 +1,39 @@
|
||||
/* pages/about/home/home.wxss */
|
||||
page{
|
||||
padding-bottom: 100rpx;
|
||||
}
|
||||
.UCenter-bg {
|
||||
background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
|
||||
background-size: cover;
|
||||
height: 550rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-top: 40rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-weight: 300;
|
||||
text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.UCenter-bg text {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.UCenter-bg image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.UCenter-bg .gif-wave{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
mix-blend-mode: screen;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user