关于 uview-ui grid宫格布局的页面跳转

这篇具有很好参考价值的文章主要介绍了关于 uview-ui grid宫格布局的页面跳转。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在使用 uview-ui 的宫格布局时,发现官方文档对于基本的图形展示还是很详细的,但是缺少点击事件。
于是文章来源地址https://www.toymoban.com/news/detail-612209.html

众里寻他千百度,蓦然回首

基本使用

  • 该组件外层为 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>

到了这里,关于关于 uview-ui grid宫格布局的页面跳转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 查找不到uview-ui文件怎么办?

     用官方的方式总是报:文件查找失败:\\\'uview-ui\\\' at main.js 解决方案:  1.先安装uview-ui 下载成功是这样的: 而不是这样的:    这样的原因是你的项目里没有package.json包,先执行  npm  i   -y再安装uview-ui 2.main.js引入  uni.scss中引入 然后再APP.vue中全局引入样式,注意一定要下

    2024年02月02日
    浏览(66)
  • 使用uview-ui遇见SassError: Undefined variable

    1.确保安装了 scss/sass 编译插件 2.在根目录下  uni.scss  文件中引入  theme.scss 3. 确保在根目录下 App.vue 文件中添加 lang=\\\"scss\\\" 和 index.scss 若依旧报错:    查看项目目录——》  再把 路径 修改为对应文件夹下——》 @import \\\"uview-ui/theme.scss\\\"; @import \\\"uni_modules/uview-ui/theme.scss\\\";    

    2024年02月16日
    浏览(42)
  • 【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)

    【微信小程序-原生开发】实用教程 轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)

    2024年02月09日
    浏览(94)
  • 【uni-app】安装uView-ui组件步骤

    uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。但目前除微信小程序,其它小程序平台的兼容可能存在一些问题,后

    2024年02月14日
    浏览(42)
  • uni-app项目使用uview-ui报错:Component is not found in path node-modules/uview-ui/components/xx/xx

    解决: 一、uview-ui如果是 npm 安装 需要在 pages.json 中添加 easycom 配置 二、配置了以上还报错的话可能是 tempalte 样式最外层没用标签包括着(只允许有一层 用 view/view 包裹最外层

    2024年02月11日
    浏览(67)
  • uniapp踩坑-文件查找失败:‘uview-ui‘ at main.js

    我是在dlcoud插件库里面下载的,默认他默认下载在了“uni_modules”,而我用官方的方式总是报:文件查找失败:\\\'uview-ui\\\' at main.js 以下是官方方法,但我这里一直报错,是因为直接写他是从“node_modules”文件夹中找 23-8-21(修改):uview官网好像换了: Icon 图标 | uView 2.0 - 全面兼

    2024年02月05日
    浏览(62)
  • uni-app使用uview-ui实现动态更改底部tabbar

    需求:根据不同的权限(用户 0, 物业 1)展示不同的tabbar 这里使用的是uview-ui@1.8.4 tabbar 在utils文件夹下新建一个tabbar.js文件,来存储不同权限下的底部导航数据 在page.json文件里,把tabbar里的几个页面去重放进去tabBar。 使用vuex 新建store 文件夹存储相关数据 在入口文件 mai

    2024年02月12日
    浏览(51)
  • 使用vue2开发uni-app项目--引入uview-ui

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一、安装 1、安装uview-ui 2、安装scss支持 二、配置 1、在main.js中引入uView库 2、uni.scss文件中引入uView的全局SCSS主题文件  3、在APP.vue文件中引入uView基础样式 4、在pages.json中 配置easycom组件模式

    2024年02月04日
    浏览(63)
  • 在引入uview-ui时报错:SassError: Undefined variable: “$u-type-primary“.

    遇到的问题 解决方法:在uni.scss引入

    2024年02月16日
    浏览(46)
  • uniapp引入uview-ui 报错:$u-badge-primary: $u-primary !default;

    解决方法 上面这个问题是在引入 uview-ui 这个ui框架后出现的,那么具体的解决方法是在项目根目录下的 uni.scss 文件中引入uview对应的样式文件: 插件地址 uni-app 插件地址(可以搜索一些其他的可用插件): https://ext.dcloud.net.cn/ uView2.0重磅发布,利剑出鞘,一统江湖: https:

    2024年02月11日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包