在使用 uview-ui 的宮格布局時(shí)，發(fā)現(xiàn)官方文檔對(duì)于基本的圖形展示還是很詳細(xì)的，但是缺少點(diǎn)擊事件。
于是文章來源地址http://www.zghlxwxcb.cn/news/detail-612209.html
眾里尋他千百度，驀然回首
基本使用
- 該組件外層為 u-grid 組件包裹，通過 col 設(shè)置內(nèi)部宮格的列數(shù)
內(nèi)部通過 u-grid-item 組件的 slot 設(shè)置宮格的內(nèi)容
如果不需要宮格的邊框，可以設(shè)置 border 為 false
<template>
<view>
<u-grid
:border="false"
@click="click"
>
<u-grid-item
v-for="(baseListItem,baseListIndex) in baseList"
:key="baseListIndex"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="baseListItem.name"
:size="22"
></u-icon>
<text class="grid-text">{{baseListItem.title}}</text>
</u-grid-item>
</u-grid>
<u-toast ref="uToast" />
</view>
</template>
<script>
export default {
data() {
return {
baseList: [{
name: 'photo',
title: '圖片'
},
{
name: 'lock',
title: '鎖頭'
},
{
name: 'star',
title: '星星'
},
]
}
},
methods: {
click(name) {
this.$refs.uToast.success(`點(diǎn)擊了第${name}個(gè)`)
}
}
}
</script>
<style lang="scss">
.grid-text {
font-size: 14px;
color: #909399;
padding: 10rpx 0 20rpx 0rpx;
/* #ifndef APP-PLUS */
box-sizing: border-box;
/* #endif */
}
</style>
綁定點(diǎn)擊事件&自定義列數(shù)
<template>
<view>
<u-grid
:border="false"
col="4"
>
<u-grid-item
v-for="(listItem,listIndex) in list"
:key="listIndex"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="listItem.name"
:size="22"
></u-icon>
<text class="grid-text">{{listItem.title}}</text>
</u-grid-item>
</u-grid>
<u-toast ref="uToast" />
</view>
</template>
<script>
export default {
data() {
return {
list: [{
name: 'photo',
title: '圖片'
},
{
name: 'lock',
title: '鎖頭'
},
{
name: 'star',
title: '星星'
},
{
name: 'hourglass',
title: '沙漏'
},
{
name: 'home',
title: '首頁'
},
{
name: 'star',
title: '音量'
},
],
}
},
methods: {
click(name) {
this.$refs.uToast.success(`點(diǎn)擊了第${name}個(gè)`)
}
}
}
</script>
<style lang="scss">
.grid-text {
font-size: 14px;
color: #909399;
padding: 10rpx 0 20rpx 0rpx;
/* #ifndef APP-PLUS */
box-sizing: border-box;
/* #endif */
}
</style>
實(shí)現(xiàn)宮格的左右滑動(dòng)
- 結(jié)合uni的swiper組件可以實(shí)現(xiàn)宮格的左右滑動(dòng)，因?yàn)閟wiper特性的關(guān)系，請(qǐng)指定swiper的高度 ，否則swiper的高度不會(huì)被內(nèi)容撐開，可以自定義swiper的指示器，達(dá)到更高的靈活度
<template>
<view>
<swiper
:indicator-dots="true"
class="swiper"
>
<swiper-item>
<u-grid :border="true">
<u-grid-item
:customStyle="{width:220+'rpx',height:220+'rpx'}"
v-for="(item, index) in swiperList"
:index="index"
:key="index"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="item"
:size="22"
></u-icon>
<text class="grid-text">{{ '宮格' + (index + 1) }}</text>
</u-grid-item>
</u-grid>
</swiper-item>
<swiper-item>
<u-grid :border="true">
<u-grid-item
:customStyle="{width:220+'rpx',height:220+'rpx'}"
v-for="(item, index) in swiperList"
:index="index + 9"
:key="index"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="item"
:size="22"
></u-icon>
<text class="grid-text">{{ '宮格' + (index + 1) }}</text>
</u-grid-item>
</u-grid>
</swiper-item>
<swiper-item>
<u-grid :border="true">
<u-grid-item
:customStyle="{width:220+'rpx',height:220+'rpx'}"
v-for="(item, index) in swiperList"
:index="index + 18"
:key="index"
>
<u-icon
:customStyle="{paddingTop:20+'rpx'}"
:name="item"
:size="22"
></u-icon>
<text class="grid-text">{{ "宮格" + (index + 1) }}</text>
</u-grid-item>
</u-grid>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'],
};
}
};
</script>
<style lang="scss">
.swiper {
height: 720rpx;
}
.grid-text {
font-size: 14px;
color: #909399;
padding: 10rpx 0 20rpx 0rpx;
/* #ifndef APP-PLUS */
box-sizing: border-box;
/* #endif */
}
</style>
那人卻在燈火闌珊處！
- 下面的代碼同樣可以作為 uniapp 個(gè)人主頁的 demo ！
- 僅可用于學(xué)習(xí)，若用于商業(yè)用途，侵權(quán)必究?。?！
<template>
<view class="vbox">
<image class="top_back_img" src="../../static/dulin-setting/set-top-bg.png" mode="aspectFit"></image>
<!-- 頭欄 -->
<view class="top">
<view class="circle">
<image class="head" src="../../static/dulin-setting/head.jpg" mode="widthFix"></image>
</view>
<view class="top-texts">
<text class="name">B站搜：一只小汪汪丫</text>
<image class="set-top-hr" src="../../static/dulin-setting/set-top-hr.png" mode=""></image>
<text class="depart">榮譽(yù)稱號(hào)：專家</text>
<view class="phoneNumber">
<text>手機(jī)號(hào)：</text>
<text>66666666</text>
</view>
</view>
</view>
<!-- 積分，等級(jí) -->
<view class="middle">
<view class="middle-left">
<image class="middle-icon" src="../../static/dulin-setting/cust.png"></image>
<text>積分：</text>
<text class="middle-num">2302</text>
</view>
<view class="middle-line"></view>
<view class="middle-right">
<image class="middle-icon" src="../../static/dulin-setting/loan.png"></image>
<text>等級(jí)：</text>
<text class="middle-num">3</text>
</view>
</view>
<!-- 宮格布局 -->
<u-grid :border="false" col="3">
<u-grid-item @click="gridClick" v-for="(listItem,listIndex) in list" :key="listIndex">
<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></u-icon>
<text class="grid-text">{{listItem.title}}</text>
</u-grid-item>
</u-grid>
<u-toast ref="uToast" />
<!-- 條形欄 -->
<view class="index">
<u-transition :show="show" mode="zoom-in">
<view class="transition"></view>
</u-transition>
<view class="cell" @click="changePass">
<view class="cell-left">
<image class="cell_icon" src="../../static/dulin-setting/account.png"></image>
<text class="cell-text">修改密碼</text>
</view>
<view class="cell-right">
<image class="right-arrow" src="../../static/dulin-setting/right-arrow.png"></image>
</view>
</view>
<view class="cell" @click="changeGray">
<view class="cell-left">
<image class="cell_icon" src="../../static/dulin-setting/account.png"></image>
<text class="cell-text">檢查更新</text>
</view>
<view class="cell-right">
<image class="right-arrow" src="../../static/dulin-setting/right-arrow.png"></image>
</view>
</view>
<view class="cell" @click="changeUs">
<view class="cell-left">
<image class="cell_icon" src="../../static/dulin-setting/account.png"></image>
<text class="cell-text">關(guān)于我們</text>
</view>
<view class="cell-right">
<image class="right-arrow" src="../../static/dulin-setting/right-arrow.png"></image>
</view>
</view>
</view>
<!-- 退出登錄 -->
<view class="logout" style="width:80%;margin-top: 50upx;">
<button type="warn" @click="logout">退出登錄</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
show: true,
list: [{
name: 'photo',
title: '歷史'
},
{
name: 'home',
title: '商城',
},
{
name: 'star',
title: '收藏'
}
],
}
},
methods: {
// 修改密碼
changePass() {
this.$router.push('/pages/changepw/changepw')
},
// 跳轉(zhuǎn)至積分商城
gridClick(name) {
if (name == 1)
this.$router.push('/pages/goods-detail/sendForm')
},
// click(name) {
// this.$refs.uToast.success('點(diǎn)擊了第${name}個(gè)')
// },
changeUs() {
this.$router.push('/pages/aboutUs/aboutUs')
},
logout() {
uni.showModal({
title: '提示',
content: '確認(rèn)退出登陸？',
success: function(res) {
if (res.confirm) {
uni.removeStorage({
key: 'token',
success(res) {
uni.redirectTo({
url: '/pages/login/login'
})
}
})
} else if (res.cancel) {
console.log('用戶點(diǎn)擊取消');
}
}
});
}
}
}
</script>
<style scoped>
.index {
display: flex;
flex-direction: column;
width: 100%;
background-color: white;
border-top: 1px solid #cccccc;
}
.vbox {
display: flex;
flex-direction: column;
align-items: center;
}
.top_back_img {
z-index: -1;
position: absolute;
top: 0upx;
width: 100%;
height: 420upx;
}
.top {
display: flex;
width: 100%;
height: 420upx;
align-items: center;
}
.circle {
margin-left: 100upx;
width: 120upx;
height: 120upx;
border: 10upx solid #a4f4f6;
border-radius: 250rpx;
overflow: hidden;
}
.head {
width: 120upx;
height: 120upx;
border-radius: 150upx;
}
.top-texts {
display: flex;
flex-direction: column;
margin-left: 15upx;
color: black;
font-size: 24rpx;
}
.name {
padding: 20rpx 10rpx;
font-size: 36upx;
font-weight: 500;
}
.set-top-hr {
width: 210upx;
height: 6upx;
}
.top-changeInfo {
margin-top: 250upx;
width: 120upx;
height: 28upx;
line-height: 28upx;
background-color: #FFFFFF;
border-radius: 15upx;
padding: 10rpx;
color: #33dce8;
}
.depart {
padding: 20rpx 20rpx 0 0;
font-size: 16rpx;
}
.phoneNumber {
font-size: 16rpx;
padding: 20rpx 20rpx 0 0;
}
.middle {
display: flex;
align-items: center;
position: relative;
top: -50upx;
width: 80%;
height: 100rpx;
background-color: white;
border-radius: 15upx;
}
.middle-line {
width: 2rpx;
height: 40rpx;
background-color: #eeeeee;
}
.middle-left {
flex-grow: 1;
color: #666666;
display: flex;
align-items: center;
text-align: center;
}
.middle-right {
flex-grow: 1;
color: #666666;
display: flex;
align-items: center;
text-align: center;
}
.middle-icon {
width: 40upx;
height: 40upx;
margin-left: 20upx;
}
.middle-num {
color: #fcac45;
-webkit-font-smoothing: antialiased;
}
.cell {
display: flex;
align-items: center;
border-bottom: 1px solid #ccc;
height: 90upx;
align-items: center;
justify-content: space-between;
}
.cell:active {
background-color: #333;
color: white;
box-shadow: 1upx 1upx 35upx #ccc;
}
.cell-left {
display: flex;
align-items: center;
margin-left: 65upx;
}
.cell-text {
margin-left: 25upx;
}
.cell-right {
margin-right: 45upx;
height: 28upx;
}
.cell_icon {
width: 40upx;
height: 40upx;
height: 40upx;
}
.right-arrow {
color: #aaa;
width: 15upx;
height: 28upx;
}
.grid-text {
font-size: 20px;
color: #909399;
padding: 0rpx 70rpx 20rpx 70rpx;
/* #ifndef APP-PLUS */
box-sizing: border-box;
/* #endif */
}
</style>
文章來源：http://www.zghlxwxcb.cn/news/detail-612209.html
到了這里，關(guān)于關(guān)于 uview-ui grid宮格布局的頁面跳轉(zhuǎn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
