热门标签
热门文章
- 1LinuxShell编程1———shell基础命令_linux shell的一些基础命令
- 2一款优雅的流程图利器-Mermaid 使用指南
- 3【剑指offer】链表03-JZ25 合并两个排序的链表_输入两个递增的链表,单个链表的长度为n,合并这两个链表并使新链表中的节点任然是
- 4【comfyui】AI绘画一键换脸工作流，学会你也可以实现随时换脸啦_comfyui 换脸
- 5【FastText——总结笔记】_fasttext 损失函数自定义
- 6大数据技术基础（一）
- 7如何让自己的ip地址不变？可这样固定IP地址_固定ip地址的方法
- 8R语言APSIM模型进阶应用与参数优化、批量模拟实践技术
- 9大数据常用基本算法
- 10comfyui节点编写示例文件（下）_comfyui 创建自定义 节点
当前位置: article > 正文
uniApp——个性化组件_uniapp底部导航栏
作者：IT小白 | 2024-08-12 17:12:32
赞
踩
uniapp底部导航栏
一、底部导航栏
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
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;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
二、瀑布流布局
<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
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/970742
推荐阅读
相关标签
