Skip to content

Commit 4756163

Browse files
7insummer7insummer
authored
feat:发布版本0.7.0
2 parents 15fe170 + 36f620e commit 4756163

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+1620
-59
lines changed

‎dist/album/index.js‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
// miniprogram_npm/lin-ui/album/index.js
2+
Component({
3+
/**
4+
* 组件的属性列表
5+
*/
6+
externalClasses: ['l-class', 'l-single-image-class', 'l-multi-image-class'],
7+
properties: {
8+
urls: {
9+
type: Array
10+
},
11+
// 是否可以预览
12+
preview: {
13+
type: Boolean,
14+
value: true
15+
},
16+
gapRow: {
17+
type: Number,
18+
value: 10,
19+
},
20+
gapColumn: {
21+
type: Number,
22+
value: 10,
23+
},
24+
// 单图时长边大小
25+
singleSize: {
26+
type: Number,
27+
value: 360,
28+
},
29+
// 多图时图片边长
30+
multipleSize: {
31+
type: Number,
32+
value: 158,
33+
},
34+
// 单图显示模式
35+
singleMode: {
36+
type: String,
37+
value: 'aspectFit',
38+
},
39+
// 多图显示模式
40+
multipleMode: {
41+
type: String,
42+
value: 'aspectFill',
43+
},
44+
key: {
45+
type: String,
46+
value: 'url'
47+
}
48+
},
49+
50+
/**
51+
* 组件的初始数据
52+
*/
53+
data: {
54+
// 传值方式是新方式还是旧方式
55+
newType: true,
56+
// 单图短边大小
57+
shortSideValue: 0,
58+
// 图片排列几行
59+
row: 0,
60+
// 图片排列几列
61+
colum: 0,
62+
},
63+
64+
/**
65+
* 组件的生命周期
66+
*/
67+
lifetimes: {
68+
attached() {
69+
// 在组件实例进入页面节点树时执行
70+
71+
//判断传入urls长度
72+
if (this.data.urls.length > 9) {
73+
const urls = this.data.urls.slice(0, 9);
74+
this.setData({
75+
urls
76+
});
77+
console.warn('超过9张图片！');
78+
}
79+
80+
this.preview();
81+
82+
},
83+
},
84+
85+
/**
86+
* 组件的方法列表
87+
*/
88+
methods: {
89+
// 判断传入的urls是字符串列表(old模式)还是对象列表(new模式)
90+
judgeType() {
91+
const urls = this.data.urls;
92+
if (urls.length != 0) {
93+
if (typeof (urls[0]) !== 'object') {
94+
return false;
95+
}
96+
}
97+
return true;
98+
},
99+
100+
//判断照片是横屏还是竖屏并计算短边的长度
101+
//如不指定短边的长度，短边会默认显示image组件的长度
102+
horizontalOrVertical: function (src) {
103+
wx.getImageInfo({
104+
src: src,
105+
success: (res) => {
106+
const longSide = res.width >= res.height ? res.width : res.height;
107+
const shortSide = res.width >= res.height ? res.height : res.width;
108+
this.setData({
109+
horizontalScreen: res.width >= res.height ? true : false,
110+
shortSideValue: shortSide * this.data.singleSize / longSide
111+
});
112+
}
113+
});
114+
},
115+
116+
// 显示图片
117+
preview: function () {
118+
// 判断传入模式
119+
const newType = this.judgeType();
120+
this.setData({
121+
newType
122+
});
123+
//显示图片
124+
const urls = this.data.urls;
125+
const key = this.data.key;
126+
127+
if (urls.length == 1) {
128+
this.horizontalOrVertical(newType ? urls[0][key] : urls[0]);
129+
}
130+
},
131+
132+
onPreviewTap(e) {
133+
const index = e.currentTarget.id;
134+
const urls = this.data.urls;
135+
let tempFilePath = '';
136+
let previewImageList = [];
137+
const newType = this.data.newType;
138+
const key = this.data.key;
139+
140+
if (newType) {
141+
tempFilePath = urls[index][key];
142+
for (let i = 0; i < urls.length; i++) {
143+
previewImageList.push(urls[i][key]);
144+
}
145+
} else {
146+
tempFilePath = urls[index];
147+
previewImageList = urls;
148+
}
149+
150+
let detail = {
151+
index, // 下标
152+
current: urls[index], // 当前显示图片的http链接
153+
all: urls // 需要预览的图片http链接列表
154+
};
155+
let option = {};
156+
if (this.data.preview === true) {
157+
wx.previewImage({
158+
current: tempFilePath, // 当前显示图片的http链接
159+
urls: previewImageList // 需要预览的图片http链接列表
160+
});
161+
}
162+
this.triggerEvent('lintap', detail, option);
163+
}
164+
165+
}
166+
});

‎dist/album/index.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"component": true,
3+
"usingComponents": {
4+
}
5+
}

‎dist/album/index.wxml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<wxs src="index.wxs" module="album"></wxs>
2+
<view class="container l-class" style="{{album.containerStyle(urls, multipleSize, gapRow, gapColumn)}}">
3+
<block wx:for="{{urls}}" wx:key="index">
4+
<image id='{{index}}' bind:tap="onPreviewTap" class="{{album.blockClass(urls, horizontalScreen)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length == 1?singleMode:multipleMode}}" />
5+
</block>
6+
</view>

‎dist/album/index.wxs‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
var containerStyle = function (urls, multipleSize, gapRow, gapColumn) {
2+
urls.length == 2 || urls.length == 4 ? 'width:' + (2 * multipleSize + gapRow) + 'rpx;' : 'width:' + (3 * multipleSize + 2 * gapRow) + 'rpx;'
3+
if (urls.length == 2 || urls.length == 4) {
4+
return 'width:' + (2 * multipleSize + gapRow) + 'rpx; grid-row-gap:' + gapColumn + 'rpx; grid-column-gap:' + gapRow + 'rpx;grid-template-columns:repeat(auto-fit, ' + multipleSize + 'rpx);'
5+
} else {
6+
return 'width:' + (3 * multipleSize + 2 * gapRow) + 'rpx; grid-row-gap:' + gapColumn + 'rpx; grid-column-gap:' + gapRow + 'rpx;grid-template-columns:repeat(auto-fit, ' + multipleSize + 'rpx);'
7+
}
8+
9+
}
10+
11+
var blockClass = function (urls, horizontalScreen) {
12+
if (urls.length == 1) {
13+
if (horizontalScreen) {
14+
return 'l-single-image-class'
15+
} else {
16+
return 'vertical l-single-image-class'
17+
}
18+
} else {
19+
return 'l-multi-image-class'
20+
}
21+
}
22+
23+
var blockStyle = function (urls, horizontalScreen, shortSideValue, singleSize, multipleSize) {
24+
if (urls.length == 1) {
25+
if (horizontalScreen) {
26+
return 'height:' + shortSideValue + 'rpx;width:' + singleSize + 'rpx;'
27+
} else {
28+
return 'width:' + shortSideValue + 'rpx;height:' + singleSize + 'rpx;'
29+
}
30+
} else {
31+
return 'height:' + multipleSize + 'rpx;width:' + multipleSize + 'rpx;'
32+
}
33+
}
34+
35+
module.exports = {
36+
containerStyle: containerStyle,
37+
blockClass: blockClass,
38+
blockStyle: blockStyle
39+
}

‎dist/album/index.wxss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.container{display:grid}.vertical{height:360rpx}

‎dist/card/index.wxml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<view class="l-class card-container {{'card-container-' + type}} {{'card-container-' + type + '-' + position}} {{full?'card-container-full':'card-container-unfull'}}">
22
<block wx:if="{{type ==='primary' || type ==='cover'}}">
3-
<image wx:if="{{!plaintext}}" class="l-img-class {{full?'cover-img-full':'cover-img-unfull'}} {{ 'card-img-' + type }} {{ 'card-img-' + type + '-' + position }}" mode="aspectFill" lazy-load="{{true}}" src="{{image}}"></image>
3+
<image wx:if="{{!plaintext}}" class="l-img-class {{full?'cover-img-full':'cover-img-unfull'}} {{ 'card-img-' + type }} {{ 'card-img-' + type + '-' + position }}" mode="{{imageMode}}" lazy-load="{{true}}" src="{{image}}"></image>
44
<view class="card-content">
55
<text class="l-title-class card-title {{'card-title-' + type}}">{{title}}</text>
66
<slot />

‎dist/combined-tabs/index.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,6 @@ Component({
1010
linked() {
1111
// 每次有子节点被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后
1212
this.initTabs();
13-
},
14-
unlinked() {
15-
this.initTabs();
1613
}
1714
},
1815
options: {

‎dist/popup/index.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,7 @@ Component({
7171
});
7272
setTimeout(()=>{
7373
this.setData({
74-
show: false,
75-
status: 'show'
74+
show: false
7675
});
7776
},300);
7877
};

‎dist/popup/index.wxss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-center-active-hide{animation:popup-center-fadeout .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}
1+
.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-center-active-hide{animation:popup-center-fadeout .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadein{0%{transform:translate3d(0,100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}

‎dist/segment/index.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,6 @@ Component({
3333
linked() {
3434
// 每次有子节点被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后
3535
this.initTabs();
36-
},
37-
unlinked() {
38-
this.initTabs();
3936
}
4037
},
4138
},
@@ -75,6 +72,20 @@ Component({
7572
itemWidth: Number
7673
},
7774

75+
observers: {
76+
'activeKey': function (newKey) {
77+
if(!newKey) return;
78+
const index = this.data.tabList.findIndex(tab=>tab.key===newKey);
79+
this.setData({
80+
currentIndex:index
81+
},() => {
82+
if (this.data.scrollable) {
83+
this.queryMultipleNodes();
84+
}
85+
});
86+
}
87+
},
88+
7889
/**
7990
* 组件的初始数据
8091
*/

0 commit comments

Comments
 (0)