uniApp——个性化组件

已于 2023-01-21 14:48:35 修改
阅读量1.2k 收藏 2
点赞数 1
分类专栏： uniApp 文章标签： uni-app javascript html
于 2022-09-02 14:53:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DreamPossible20/article/details/126663012
版权

文章目录

一、底部导航栏

在这里插入图片描述

1. 底部导航栏组件

<template>
	<view class="bottom-tab">
		<view :class="item.center==true?'bottom-tab-item-center':'bottom-tab-item-sider' " @click="changeTap(item)" v-for="(item,index) in tabList" :key="index">
			<image v-if="curTab==item.id" class="first-img" :src="item.imgOn"></image>
			<image v-if="curTab!=item.id" class="first-img" :src="item.imgOff"></image>
			<text :class="curTab==item.id?'text-position text-on':'text-position'">{{item.name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"wyg-bottom-tab-withcenter",
		props:{
			tabIndex: {
				//图片的尺寸
				type: String,
				default: "1"
			},
			tabListParent:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				curTab:1,
				tabList:[]
			}
		},
		created(){
			this.curTab=new Number(this.tabIndex);
			if(this.tabListParent.length>0){
				this.tabList=this.tabListParent;
			}
		},
		methods: {
			changeTap(e){
				console.log(e.id)
				this.curTab = e.id
				this.$emit('send', e.id)
			}	
		}
	}
	
</script>

<style lang="scss">
	.bottom-tab{
		position: fixed;
		background-color: #FDFDFD;
		bottom: 0%;
		left:0%;
		width: 100%;
		height: 2.9rem;
		
		display: flex;
		align-items:center;
		justify-content:space-between;
		.bottom-tab-item-center{
			width: 24%;
			display: flex;
			flex-direction: column;
			align-items:center;
			justify-content:center;
			.first-img{
				width: 2.6rem;
				height: 2.6rem;
				margin-top: -0.8rem;
				
				border-radius: 50%;
				border: 0.01rem solid #C0C4CC;
			}
			.text-position{
				margin-top: 0rem;
				font-size: 0.6rem;
				color: #757575;
			}
			.text-on{
				color: #FFB400;
			}
			
		}
		.bottom-tab-item-sider{
			width: 19%;
			display: flex;
			flex-direction: column;
			align-items:center;
			justify-content:center;
			
			.first-img{
				width: 1.5rem;
				height: 1.5rem;
			}
			.text-position{
				margin-top: 0rem;
				font-size: 0.6rem;
				color: #757575;
			}
			.text-on{
				color: #FFB400;
			}
			
		}
	}
	
</style>

2. 组件数据

const LIST = [{
		id: 1,
		name: "首页",
		imgOff: "../../static/wyg-bottom-tab/img/icon_01.png",
		imgOn: "../../static/wyg-bottom-tab/img/icon_01_f.png",
		"url": "/pages/index/index"
	},
	{
		id: 2,
		name: "分类",
		imgOff: "../../static/wyg-bottom-tab/img/icon_02.png",
		imgOn: "../../static/wyg-bottom-tab/img/icon_02_f.png",
		"url": "/pages/sqaure/sqaure"
	},
	{
		id: 3,
		name: "福利",
		imgOff: "../../static/wyg-bottom-tab/img/wel.png",
		imgOn: "../../static/wyg-bottom-tab/img/wel-on.png",
		"url": "/pages/center/index",
		center:true
	},
	{
		id: 4,
		name: "购物车",
		imgOff: "../../static/wyg-bottom-tab/img/icon_03.png",
		imgOn: "../../static/wyg-bottom-tab/img/icon_03_f.png",
		"url": "/pages/message/message"
	},
	{
		id: 5,
		name: "个人中心",
		imgOff: "../../static/wyg-bottom-tab/img/icon_04.png",
		imgOn: "../../static/wyg-bottom-tab/img/icon_04_f.png",
		"url": "/pages/mine/mine"
	}
]

export default LIST;

3. 默认页面添加组件

<template>
    <view :class="vuex_theme">
		<home v-if="showPageId === 1"></home>
		<square v-if="showPageId === 2"></square>
		<message v-if="showPageId === 4"></message>
		<mine v-if="showPageId === 5"></mine>
        <wyg-bottom-tab-withcenter tabIndex=1 :tabListParent="tabList" @send='acceptValue'></wyg-bottom-tab-withcenter>
    </view>
</template>

<script> 
    import wygBottomTabWithcenter from '@/components/wyg-bottom-tab/wyg-bottom-tab-withcenter.vue';
    import TAB_LIST from '@/static/wyg-bottom-tab/js/botoom-list2.js'
	import mine from '@/pages/mine/mine.vue'
	import square from '@/pages/square/square.vue'
	import home from '@/pages/home/home.vue'
	import message from '@/pages/message/message.vue'
    export default {
        components:{wygBottomTabWithcenter, mine, square, home, message},
        data() {
            return {
                tabList:TAB_LIST,
				showPageId: 1
            }
        },
        onLoad() {
        },
        methods: {
			acceptValue(e){
				this.showPageId = e
				console.log(e)
			}
        }
    }
</script>

二、瀑布流布局

<template>
    <view class="water-fill">
        <template v-if="waterList.length != 0">
            <view class="water-wrapper" @touchstart='handletouchstart' @touchmove='handletouchmove'
                @touchend='handletouchend'>
                <!-- <refreshView ref="refreshView" /> -->
                <view class="water-box">
                    <view class="water-sub" v-for="(items,index) in waterList" :key="index">
                        <view class="water-item" v-for="(item,index) in items" :key="index">
                            <view class="water-top">
                                <image :src="item.cover" mode="widthFix"></image>
                                <h3>{{item.title}}</h3>
                            </view>
                            <view class="water-bottom">
                                <view class="water-bottom-item">
                                    <view class="img-box">
                                        <image class="water-avatar" :src="item.photo" mode="widthFix"></image>
                                    </view>
                                    <text class="water-name">{{item.name}}</text>
                                </view>
                                <view class="water-bottom-item">
                                    <image src="@/static/images/like.png" mode="widthFix"></image>
                                    <text>{{item.likeCount}}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </template>
        <view class="water-none" v-if="waterList.length == 0">
            <image src="../../static/images/3.jpeg" mode="widthFix"></image>
            <text>暂无数据</text>
        </view>
    </view>
</template>

<script>
    import Vue from 'vue';
    import refreshView from '../Refresh/Refresh.vue'
    export default {
        components: {
            refreshView
        },
        name: 'waterFill',
        data() {
            return {
                waterList: [
                    [{
                            cover: "http://qing.demo.hongcd.com/uploads/20210304/e522390a2607d8f7a92c7196f0fe2d9b.jpg",
                            id: "1084",
                            isLiked: "0",
                            likeCount: 0,
                            name: "笑饮孤鸿",
                            photo: "https://img2.baidu.com/it/u=3189065550,26744168&fm=253&fmt=auto&app=120&f=JPEG?w=804&h=800",
                            title: "虽然你我会下落不明",
                        },
                        {
                            cover: "../../static/images/3.jpeg",
                            id: "1084",
                            isLiked: "0",
                            likeCount: 0,
                            name: "笑饮孤鸿",
                            photo: "https://img2.baidu.com/it/u=3189065550,26744168&fm=253&fmt=auto&app=120&f=JPEG?w=804&h=800",
                            title: "虽然你我会下落不明",
                        },
                        {
                            cover: "https://tse3-mm.cn.bing.net/th/id/OIP-C.RmMBEiuK7jiteaQByZoO2gHaKc?w=182&h=257&c=7&r=0&o=5&dpr=1.25&pid=1.7",
                            id: "1084",
                            isLiked: "0",
                            likeCount: 0,
                            name: "笑饮孤鸿",
                            photo: "https://img2.baidu.com/it/u=3189065550,26744168&fm=253&fmt=auto&app=120&f=JPEG?w=804&h=800",
                            title: "虽然你我会下落不明",
                        }
                    ],
                    [{


                            cover: "https://tse4-mm.cn.bing.net/th/id/OIP-C.3ch3ETbSknC0tCGqriUKbQHaEK?w=294&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7",
                            id: "1084",
                            isLiked: "0",
                            likeCount: 0,
                            name: "笑饮孤鸿",
                            photo: "https://img2.baidu.com/it/u=3189065550,26744168&fm=253&fmt=auto&app=120&f=JPEG?w=804&h=800",
                            title: "虽然你我会下落不明",
                        },
                        {
                            cover: "http://qing.demo.hongcd.com/uploads/20210304/e522390a2607d8f7a92c7196f0fe2d9b.jpg",
                            id: "1084",
                            isLiked: "0",
                            likeCount: 0,
                            name: "笑饮孤鸿",
                            photo: "https://img2.baidu.com/it/u=3189065550,26744168&fm=253&fmt=auto&app=120&f=JPEG?w=804&h=800",
                            title: "虽然你我会下落不明",
                        },
                        {
                            cover: "https://tse2-mm.cn.bing.net/th/id/OIP-C.Vkj713W8u9S35-geMG1rgwHaE5?w=240&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7",
                            id: "1084",
                            isLiked: "0",
                            likeCount: 0,
                            name: "笑饮孤鸿",
                            photo: "https://img2.baidu.com/it/u=3189065550,26744168&fm=253&fmt=auto&app=120&f=JPEG?w=804&h=800",
                            title: "虽然你我会下落不明",
                        }
                    ]
                ],
                errorimage: 'this.src="' + require('@/static/images/3.jpeg') + '"'
            }
        },
        methods: {
            // 将数组拆分成可使用状态,减少代码
            groupCut(array, subGroupLength) {
                let index = 0;
                let newArray = [];
                while (index < array.length) {
                    newArray.push(array.slice(index, index += subGroupLength));
                }
                return newArray;
            },
            handleLoad(arr) {
                // 如果arr存在,即在父组件刷新的值  若不存在就是下拉请求刷新
                if (arr) {
                    let length = arr.length;
                    this.waterList = this.groupCut(arr, length / 2)
                } else {
                    console.log('写请求数据接口，将数据赋值给waterList')
                }
                uni.showToast({
                    title: '刷新啦'
                })
            },
            // 监听页面下拉刷新
            //触摸开始
            handletouchstart: function(e) {
                let that = this;
                // that.$refs.refreshView.handletouchstart(e)
            },

            //触摸移动
            handletouchmove: function(e) {
                let that = this;
                // that.$refs.refreshView.handletouchmove(e)
            },
            //触摸结束
            handletouchend: function(e) {
                let that = this;
                // that.$refs.refreshView.handletouchend(e);
                that.handleLoad();
            }
        },
    }
</script>

<style lang="less" scoped>
    .water-fill {
        .water-wrapper {
            .water-box {
                display: flex;
                width: 100%;
                box-sizing: border-box;
                font-size: 0;
                justify-content: space-between;
                background-color: #f5f8f9;
                padding: 10px 5px;

                .water-sub {
                    display: flex;
                    width: 49%;
                    overflow: hidden;
                    flex-direction: column;

                    .water-item {
                        width: 100%;
                        border-radius: 12upx;
                        overflow: hidden;
                        background-color: #FFFFFF;
                        margin-bottom: 10upx;

                        .water-top {
                            image {
                                width: 100%;
                            }

                            h3 {
                                font-family: PingFangHK-Medium;
                                font-size: 28upx;
                                font-weight: 600;
                                line-height: 40upx;
                                color: #333333;
                                text-align: justify;
                                margin: 20upx;
                                .n-ellipsis(2);
                            }
                        }

                        .water-bottom {
                            display: flex;
                            justify-content: space-between;
                            margin: 0 20upx 20upx 20upx;
                            font-size: 24upx;

                            .water-bottom-item {
                                display: flex;
                                align-items: center;

                                .img-box {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    width: 50upx;
                                    height: 50upx;
                                    border-radius: 50%;
                                    overflow: hidden;

                                    .water-avatar {
                                        width: 50upx;
                                    }
                                }

                                .water-name {
                                    max-width: 160upx;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                }

                                text {
                                    line-height: 32upx;
                                    font-size: 24upx;
                                    color: #333;
                                    margin-left: 14upx;
                                }

                                image {
                                    width: 28upx;
                                }
                            }
                        }
                    }
                }
            }
        }

        .water-none {
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            image {
                width: 200upx;
            }

            text {
                padding-top: 40upx;
                font-size: 24upx;
                color: #999;
            }
        }
    }


    //多行文本省略
    .n-ellipsis(@n) {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: @n;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        word-break: break-all;
    }
</style>
滴滴滴嘟嘟嘟.
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
shopping_pro:uniapp ————————————商城模版
03-18
shopping_pro uniapp相关api学习，目前还在更新中 uniapp ————————————商城模版
uni-app导航栏
YZRHANYU的博客
11-02 4905
uni-app导航栏
uniapp开发微信小程序自定义顶部导航栏
m0_55258023的博客
07-14 1万+
uniapp开发微信小程序自定义顶部导航栏
【uniapp小程序】配置tabbar底部导航栏_uniapp底部导航栏
2301_82243558的博客
04-17 1435
配置底部导航栏首先需要大家准备好自己想要使用的图标，每个tab可以选择两个图标，分别为选中前的和选中后的。之后我们根据uniapp官网提供的uniapp官网tabbar配置项，话不多说直接上正文一起来学习一下如何配置底部导航栏吧。
Uniapp 自定义导航栏 自定义头部组件
peachban的博客
10-30 2665
uni-nav-bar 自定义导航栏基本用法属性名类型默认值说明titleString标题文字leftTextString左侧按钮文本rightTextString右侧按钮文本leftIconString左侧按钮图标（图标类型参考Icon 图标type 属性）rightIconString右侧按钮图标（图标类型参考Icon 图标type 属性）colorString#000000。
uniapp——使用colorUI、自定义顶部导航栏、漂亮的卡片时间列表（包括微信小程序时间列表）
wy313622821的博客
12-17 6703
简介：使用colorUI实现如下的效果： 1、导入colorUI 一、下载colorUI源码解压，复制根目录的 /colorui 文件夹到你的根目录 二、App.vue 引入关键Css main.css icon.css <style> @import "colorui/main.css"; @import "colorui/icon.css"; @import "app.css"; /* 你的项目css */ .... </style> 三、p
【自用整理】Uniapp导航栏&状态栏
weixin_43910903的博客
03-24 5232
导航栏 (1) 全局导航栏样式设置： 在pages.json的globalStyle里进行各个参数配置 "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "Hello uniapp", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "backgroundCol
【uniapp小程序】配置tabbar底部导航栏
热门推荐
qq_49002903的博客
08-18 8万+
在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。.........
uniapp制作app与小程序前端——底部导航栏
hk_hkl的博客
05-09 3678
手把手玩转uniapp前端No.1
uniapp使用 uview-plus 底部导航栏(vue3项目)
weixin_71403100的博客
07-25 4116
uniapp使用 uview-plus 底部导航栏(vue3项目)
uniapp设置tabbar底部导航栏
qq_42376600的博客
01-17 3388
uniapp的tabBar配置
【uni-app】创建底部或者顶部导航栏
Qxn530的博客
09-13 9181
创建底部导航栏、自定义顶部导航栏组件
Uniapp swiper 滚动图组件
09-10
全端支持，只需引入组件，更改内容即可
uniapp滑动周组件
07-08
uniapp滑动周组件
uniapp手写电子签名组件
04-14
uniapp 中微信小程序手写电子签名组件，下载即用，有问题随时联系我哈
uniapp 自定义地址列表组件
最新发布
05-02
uniapp 自定义地址列表组件
uni-app 经验分享，从入门到离职（二）—— tabBar 底部导航栏实战基础篇
黛琳ghz的博客，期待你的关注。
08-19 3万+
这篇文章的内容主题是关于小程序的 tabbar 底部导航栏的入门使用和实战技巧。通过上一篇文章的基础，我们继续对 uni-app 进行更深一步的了解和学习，以上一篇文章创建的项目为例子，我们在这个项目的基础上进行改动和学习小程序的 tabbar 内容。
uniapp里自定义底部导航
weixin_43340308的博客
09-26 1万+
uniapp里自定义底部导航
uniapp项目实战系列(3)：底部导航栏与头部导航栏的配置
张羽的博客
08-31 5113
在本文章中学会在pages.json中进行配置全局标题和每一个页面自己的标题以及学会配置底部导航栏的tabber。
uniapp——接入element
10-20
在开发uniapp时，我们可以使用element-ui来实现一些常见的UI组件。具体步骤如下： 1. 在main.js中引入element-ui库和样式文件，可以使用npm安装或者直接下载文件并引入。 2. 在Vue实例中使用Vue.use(ElementUI)来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值