关于 uview-ui grid宫格布局的页面跳转
唐修能
在使用 uview-ui 的宫格布局时，发现官方文档对于基本的图形展示还是很详细的，但是缺少点击事件。
于是
众里寻他千百度，蓦然回首
基本使用
- 该组件外层为 u-grid 组件包裹，通过 col 设置内部宫格的列数
内部通过 u-grid-item 组件的 slot 设置宫格的内容
如果不需要宫格的边框，可以设置 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(`点击了第${name}个`)
}
}
}
</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>
绑定点击事件&自定义列数
<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(`点击了第${name}个`)
}
}
}
</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>
实现宫格的左右滑动
- 结合uni的swiper组件可以实现宫格的左右滑动，因为swiper特性的关系，请指定swiper的高度 ，否则swiper的高度不会被内容撑开，可以自定义swiper的指示器，达到更高的灵活度
<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 个人主页的 demo ！
- 仅可用于学习，若用于商业用途，侵权必究！！！
<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">荣誉称号：专家</text>
<view class="phoneNumber">
<text>手机号：</text>
<text>66666666</text>
</view>
</view>
</view>
<!-- 积分，等级 -->
<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>等级：</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">关于我们</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')
},
// 跳转至积分商城
gridClick(name) {
if (name == 1)
this.$router.push('/pages/goods-detail/sendForm')
},
// click(name) {
// this.$refs.uToast.success('点击了第${name}个')
// },
changeUs() {
this.$router.push('/pages/aboutUs/aboutUs')
},
logout() {
uni.showModal({
title: '提示',
content: '确认退出登陆？',
success: function(res) {
if (res.confirm) {
uni.removeStorage({
key: 'token',
success(res) {
uni.redirectTo({
url: '/pages/login/login'
})
}
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
}
}
</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>
类似资料：