一、底部导航栏

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.idthis.$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 = econsole.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>

uniApp——个性化组件相关推荐

MIP个性化组件提交规范
MIP个性化组件一般用来实现前后端数据传输或特殊的交互效果,由广大开发者贡献.出于性能.可维护性等方面的考虑,开发者在新增组件或升级组件时,请遵守以下规范. 规范中的必须(MUST),禁止(MUST ...
uni-app常用组件
uni-app内部组件 uni-app官网组件消息提示最全的toast: uni.showToast({title:"请输入用户名密码!" ,icon: 'none',mask ...
uni-app的组件easycom的使用
uni-app的组件easycom的使用 * HBuilderX 2.5.5起支持easycom组件模式传统vue组件,需要安装.引用.注册,三个步骤后才能使用组件 easycom 组件安装在项目的 ...
uniapp “未检测到手机或模拟器，请稍后重试”和uniapp自定义组件与通信
错误九:"未检测到手机或模拟器,请稍后重试" 在使用HBuilderX创建uni-app项目的时候想要在手机上运行看看效果,当你点击运行下面的"运行到手机或模拟器(N)& ...
uniapp音频组件，适配ios，Android
uniapp视频组件,适配ios,Android 说明: 有个需求是需要有音频的时长和拖动进度,我对音频使用只停留在使用audio标签,在uniapp插件市场未找到适合的组件,在通过百度只找到下面的组 ...
【uniapp前端组件】自定义车牌键盘
自定义车牌输入键盘–车牌键盘简介本组件根据自定义万能键盘(数字键盘.身份证键盘.带小数点数字键盘.车牌键盘)升级而来,老组件代码有点看不懂了,哈哈哈哈.另外数字键盘.身份证键盘.小数点数字键盘un ...
详细解析：uni-app|vue组件实现茶杯中茶水浮动loading纯CSS动效
前言前面我已经跟大家分享了[科技感Loading动效]和[水珠晃动Loading动效]两篇文章了,如果大家没有读过,建议大家花一点点时间去看一下,有了前两篇文章的基础后,这次,小凡给大家再分享一个茶 ...
【uni-app教程】UniAPP 常用组件和常用 API 简介# 知心姐姐聊天案例
五.UniAPP 常用组件简介 uni-app 为开发者提供了一系列基础组件,类似 HTML 里的基础标签元素,但 uni-app 的组件与 HTML 不同,而是与小程序相同,更适合手机端使用. 虽然 ...
干货分享|纯CSS绘制电池充电水波纹动效(uni-app|view组件版)
前言依托于CSS3提供的强大功能,我们可以充分发挥自己的想象力,制作出许多非常惊艳的动效,比如:接下来我要跟大家分享的一个完全用CSS绘制出来的电池充电水波纹动效,还是老规矩,小凡我依然分享的是un ...

uniApp——个性化组件

文章目录

一、底部导航栏

1. 底部导航栏组件

2. 组件数据

3. 默认页面添加组件

二、瀑布流布局

uniApp——个性化组件相关推荐

最新文章

热门文章