parent
d0e9a3f075
commit
824df64b19
@ -0,0 +1,35 @@ |
|||||||
|
export default{ |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
//设置默认的分享参数
|
||||||
|
//如果页面不设置share，就触发这个默认的分享
|
||||||
|
share:{ |
||||||
|
title:'嗨森逛', |
||||||
|
path:'/pages/tabBar/home/home', |
||||||
|
imageUrl:'', |
||||||
|
desc:'', |
||||||
|
content:'' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
onShareAppMessage(res) { |
||||||
|
return { |
||||||
|
title:this.share.title, |
||||||
|
path:this.share.path, |
||||||
|
imageUrl:this.share.imageUrl, |
||||||
|
desc:this.share.desc, |
||||||
|
content:this.share.content, |
||||||
|
success(res){ |
||||||
|
uni.showToast({ |
||||||
|
title:'分享成功' |
||||||
|
}) |
||||||
|
}, |
||||||
|
fail(res){ |
||||||
|
uni.showToast({ |
||||||
|
title:'分享失败', |
||||||
|
icon:'none' |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,145 @@ |
|||||||
|
<template> |
||||||
|
<view v-if="width" class="uni-grid-item"> |
||||||
|
<view :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item__box-square': square, 'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }" |
||||||
|
:style="{ 'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }" |
||||||
|
class="uni-grid-item__box" @click="_onClick"> |
||||||
|
<view class="uni-grid-item__box-item" :class="{'uni-grid-item__box-item-square': square}"> |
||||||
|
<slot /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'UniGridItem', |
||||||
|
inject: ['grid'], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
column: 0, |
||||||
|
showBorder: true, |
||||||
|
square: true, |
||||||
|
highlight: true, |
||||||
|
left: 0, |
||||||
|
top: 0, |
||||||
|
index: 0, |
||||||
|
openNum: 2, |
||||||
|
width: 0, |
||||||
|
borderColor: '#e5e5e5' |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.column = this.grid.column |
||||||
|
this.showBorder = this.grid.showBorder |
||||||
|
this.square = this.grid.square |
||||||
|
this.highlight = this.grid.highlight |
||||||
|
this.top = this.hor === 0 ? this.grid.hor : this.hor |
||||||
|
this.left = this.ver === 0 ? this.grid.ver : this.ver |
||||||
|
this.borderColor = this.grid.borderColor |
||||||
|
this.index = this.grid.index++ |
||||||
|
this.grid.children.push(this) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
_onClick() { |
||||||
|
// console.log('点击', this.index); |
||||||
|
this.grid.change({ |
||||||
|
detail: { |
||||||
|
index: this.index |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.uni-grid-item { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
height: 100%; |
||||||
|
/* #endif */ |
||||||
|
width: 168rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.uni-grid-item__box { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: flex; |
||||||
|
/* #endif */ |
||||||
|
flex: 1; |
||||||
|
position: relative; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
/* margin-top: 9rpx; |
||||||
|
margin-right: 17rpx; |
||||||
|
margin-bottom: 9rpx; |
||||||
|
margin-left: 17rpx; */ |
||||||
|
/* #ifdef APP-NVUE */ |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
/* #endif */ |
||||||
|
} |
||||||
|
|
||||||
|
.uni-grid-item__box-item { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
/* #endif */ |
||||||
|
position: relative; |
||||||
|
flex: 1; |
||||||
|
justify-content: center; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
width: 152rpx; |
||||||
|
height: 146rpx; |
||||||
|
/* padding-top: 10rpx; |
||||||
|
padding-right: 23rpx; |
||||||
|
padding-bottom: 10rpx; |
||||||
|
padding-left: 23rpx; */ |
||||||
|
border-radius: 1rpx; |
||||||
|
/* padding: 15px 0; */ |
||||||
|
} |
||||||
|
|
||||||
|
.uni-grid-item__box-item-square { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.uni-grid-item--image { |
||||||
|
width: 25px; |
||||||
|
height: 25px; |
||||||
|
} |
||||||
|
|
||||||
|
.uni-grid-item--text { |
||||||
|
font-size: 24px; |
||||||
|
margin-top: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.uni-grid-item__box-square { |
||||||
|
height: 0; |
||||||
|
padding-top: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.uni-grid-item--border { |
||||||
|
position: relative; |
||||||
|
border-bottom-color: #e5e5e5; |
||||||
|
border-bottom-style: solid; |
||||||
|
border-bottom-width: 1px; |
||||||
|
border-right-color: #e5e5e5; |
||||||
|
border-right-style: solid; |
||||||
|
border-right-width: 1px; |
||||||
|
} |
||||||
|
|
||||||
|
.uni-grid-item--border-top { |
||||||
|
border-top-color: #e5e5e5; |
||||||
|
border-top-style: solid; |
||||||
|
border-top-width: 1px; |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
height: 100%; |
||||||
|
box-sizing: border-box; |
||||||
|
/* #endif */ |
||||||
|
} |
||||||
|
|
||||||
|
.uni-highlight:active { |
||||||
|
background-color: #f1f1f1; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,129 @@ |
|||||||
|
<template> |
||||||
|
<view class="uni-grid-wrap"> |
||||||
|
<view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-style':'solid','border-left-color':borderColor, 'border-left-width':showBorder?'1px':0 }"> |
||||||
|
<slot /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
// #ifdef APP-NVUE |
||||||
|
const dom = weex.requireModule('dom'); |
||||||
|
// #endif |
||||||
|
export default { |
||||||
|
name: 'UniGrid', |
||||||
|
props: { |
||||||
|
// 每列显示个数 |
||||||
|
column: { |
||||||
|
type: Number, |
||||||
|
default: 3 |
||||||
|
}, |
||||||
|
// 是否显示边框 |
||||||
|
showBorder: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
// 边框颜色 |
||||||
|
borderColor: { |
||||||
|
type: String, |
||||||
|
default: '#e5e5e5' |
||||||
|
}, |
||||||
|
// 全局标记水平方向移动距离 ，起点为中心，负数为左移动，正数为右移动 |
||||||
|
hor: { |
||||||
|
type: Number, |
||||||
|
default: 0 |
||||||
|
}, |
||||||
|
// 全局标记垂直方向移动距离 ，起点为中心，负数为上移动，正数为下移动 |
||||||
|
ver: { |
||||||
|
type: Number, |
||||||
|
default: 0 |
||||||
|
}, |
||||||
|
// 是否正方形显示,默认为 true |
||||||
|
square: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
}, |
||||||
|
highlight: { |
||||||
|
type: Boolean, |
||||||
|
default: true |
||||||
|
} |
||||||
|
}, |
||||||
|
provide() { |
||||||
|
return { |
||||||
|
grid: this |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}` |
||||||
|
return { |
||||||
|
index: 0, |
||||||
|
elId, |
||||||
|
width: 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.children = [] |
||||||
|
this.index = 0 |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
setTimeout(() => { |
||||||
|
this._getSize((width) => { |
||||||
|
this.children.forEach((item, index) => { |
||||||
|
item.width = width |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, 50) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
change(e) { |
||||||
|
this.$emit('change', e) |
||||||
|
}, |
||||||
|
_getSize(fn) { |
||||||
|
// #ifndef APP-NVUE |
||||||
|
uni.createSelectorQuery() |
||||||
|
.in(this) |
||||||
|
.select(`#${this.elId}`) |
||||||
|
.boundingClientRect() |
||||||
|
.exec(ret => { |
||||||
|
this.width = parseInt(ret[0].width / this.column) - 1 + 'px' |
||||||
|
fn(this.width) |
||||||
|
}) |
||||||
|
// #endif |
||||||
|
// #ifdef APP-NVUE |
||||||
|
dom.getComponentRect(this.$refs['uni-grid'], (ret) => { |
||||||
|
this.width = parseInt(ret.size.width / this.column) - 1 + 'px' |
||||||
|
fn(this.width) |
||||||
|
}) |
||||||
|
// #endif |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.uni-grid-wrap { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: flex; |
||||||
|
/* #endif */ |
||||||
|
flex: 1; |
||||||
|
flex-direction: column; |
||||||
|
/* #ifdef H5 */ |
||||||
|
width: 100%; |
||||||
|
/* #endif */ |
||||||
|
} |
||||||
|
|
||||||
|
.uni-grid { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: flex; |
||||||
|
/* #endif */ |
||||||
|
flex: 1; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.uni-grid--border { |
||||||
|
border-left-color: #e5e5e5; |
||||||
|
border-left-style: solid; |
||||||
|
border-left-width: 1px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,205 @@ |
|||||||
|
<template> |
||||||
|
<view class="warp"> |
||||||
|
<view class="example-body"> |
||||||
|
<uni-grid :show-border="false" :square="false" :highlight="false" @change="change"> |
||||||
|
<uni-grid-item :hor="0" :ver="0" marker="badge" type="error" style="width: 25%;text-align: center;" text="12" v-for="item in list" :key="item.id"> |
||||||
|
<image class="image" :src="item.url" mode="aspectFill" @click="webTo" /> |
||||||
|
<text class="text">{{item.text}}</text> |
||||||
|
</uni-grid-item> |
||||||
|
</uni-grid> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import uniGrid from '@/components/zc-grid-wrap/zc-grid-wrap.vue' |
||||||
|
import uniGridItem from '@/components/zc-grid-item/zc-grid-item.vue' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
uniGrid, |
||||||
|
uniGridItem |
||||||
|
}, |
||||||
|
props:{ |
||||||
|
list:{ |
||||||
|
type:Array, |
||||||
|
default:function () { |
||||||
|
return [] |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
// list: [{ |
||||||
|
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg', |
||||||
|
// text: 'Grid 1' |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg', |
||||||
|
// text: 'Grid 2' |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg', |
||||||
|
// text: 'Grid 3' |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg', |
||||||
|
// text: 'Grid 4' |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg', |
||||||
|
// text: 'Grid 5' |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg', |
||||||
|
// text: 'Grid 6' |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg', |
||||||
|
// text: 'Grid 7' |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg', |
||||||
|
// text: 'Grid 8' |
||||||
|
// }, |
||||||
|
// { |
||||||
|
// url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg', |
||||||
|
// text: 'Grid 9' |
||||||
|
// } |
||||||
|
// ] |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
change(e) { |
||||||
|
let { |
||||||
|
index |
||||||
|
} = e.detail |
||||||
|
console.log(index) |
||||||
|
}, |
||||||
|
webTo() { |
||||||
|
this.$emit('goTo') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
/* 头条小程序组件内不能引入字体 */ |
||||||
|
/* #ifdef MP-TOUTIAO */ |
||||||
|
@font-face { |
||||||
|
font-family: uniicons; |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
src: url('~@/static/uni.ttf') format('truetype'); |
||||||
|
} |
||||||
|
|
||||||
|
/* #endif */ |
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
page { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
box-sizing: border-box; |
||||||
|
background-color: #efeff4; |
||||||
|
min-height: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
view { |
||||||
|
font-size: 28rpx; |
||||||
|
line-height: inherit; |
||||||
|
} |
||||||
|
|
||||||
|
.example { |
||||||
|
padding: 0 30rpx 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.example-info { |
||||||
|
padding: 30rpx; |
||||||
|
color: #3b4144; |
||||||
|
background: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
.example-body { |
||||||
|
text-align: center; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: center; |
||||||
|
padding: 0; |
||||||
|
font-size: 14rpx; |
||||||
|
background-color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
/* #endif */ |
||||||
|
.example { |
||||||
|
padding: 0 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.example-info { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: block; |
||||||
|
/* #endif */ |
||||||
|
padding: 30rpx; |
||||||
|
color: #3b4144; |
||||||
|
background-color: #ffffff; |
||||||
|
font-size: 30rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.example-info-text { |
||||||
|
font-size: 28rpx; |
||||||
|
line-height: 36rpx; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.example-body { |
||||||
|
flex-direction: column; |
||||||
|
padding: 0rpx; |
||||||
|
padding-bottom: 10px; |
||||||
|
background-color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
.word-btn-white { |
||||||
|
font-size: 18px; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
.word-btn { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: flex; |
||||||
|
/* #endif */ |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border-radius: 6px; |
||||||
|
height: 48px; |
||||||
|
margin: 15px; |
||||||
|
background-color: #007AFF; |
||||||
|
} |
||||||
|
|
||||||
|
.word-btn--hover { |
||||||
|
background-color: #4ca2ff; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.image { |
||||||
|
width: 80rpx; |
||||||
|
height: 80rpx; |
||||||
|
margin-bottom: 20rpx; |
||||||
|
border-radius: 10rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.text { |
||||||
|
font-size: 26rpx; |
||||||
|
line-height: 26rpx; |
||||||
|
width: 104rpx; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
color: #3A3C40; |
||||||
|
} |
||||||
|
|
||||||
|
.example-body { |
||||||
|
/* #ifndef APP-NVUE */ |
||||||
|
display: block; |
||||||
|
/* #endif */ |
||||||
|
} |
||||||
|
</style> |
||||||
|
After Width: | Height: | Size: 4.0 KiB |
Loading…
Reference in new issue