uni-app中封装的search和scroll-view
uni-app中有横向导航栏和纵向导航栏的插件，如下（实现⽅式⼤同⼩异，看⾃⾝习惯程度）：
<template>
<view class="nav">
<view class="search-box" @click="toSearch">
<view class="search-input-box">
<view class="iconfont"></view>
<input class="search-input" placeholder="搜索商品名称或粘贴商品标题" />
<view ></view>
</view>
</view>
<scroll-view class="nav-left" scroll-x :scroll-left="viewScrollLeft" @scroll="viewScroll" @scrolltolower="scrolltolower">
<view class="nav-left-item" v-for="(item,index) in list" :key="index" :class="{active:index==navIndex}" @click="goodClassifyClick(index)"> {{item.name}}</view>
</scroll-view>
<!-- <view class="nav-right" @click="toGoodClassify">
<image class="nav-image" src="../../static/icon/v2_q0u4l9.png"></image>
</view> -->
</view>
</template>
<script>
export default {
data(){
return{
viewScrollLeft:0
}
},
props:{
list:{
type: Array,
required: true,
default:()=>[]
},
navIndex:{
type: Number,
required: true,
default:0
}
},
methods:{
toSearch(){
uni.navigateTo({
url:'/pages/search/search'
})
},
scrolltolower(e){
console.log(e)
},
viewScroll(e){
this.viewScrollLeft = e.detail.scrollLeft
},
viewScrollToLeft(e){
this.viewScrollLeft = 0
},
goodClassifyClick(index){
this.$emit('goodClassifyClick',index)
},
toGoodClassify(){
uni.navigateTo({
url:'/pages/good/classify'
})
}
}
}
</script>
<style lang="scss" scoped>
.
nav{
width: 750rpx;
position: fixed;
left: 0;
// top: 0;
z-index: 2;
.nav-left{
width: 750rpx;
height: 72rpx;
padding-left: 20rpx;
box-sizing: border-box;
/
/ display: flex;
zoom: 1;
overflow: hidden;
white-space: nowrap;
.nav-left-item{
// float: left;
display: inline-block;
padding: 0 5rpx;
margin-right: 20rpx;
// flex: 1;
line-height: 66rpx;
color: rgba(255, 255, 255, 0.95);
font-size: 28rpx;
text-align: center;
box-sizing: border-box;
border-bottom: 6rpx solid transparent;
&.active{
font-size: 32rpx;
// border-bottom: 6rpx solid rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
font-weight:bold ;
position: relative;
&::after{
content: '';
width: 34rpx;
height: 0;
border-top: 4rpx solid rgba(255, 255, 255, 1); position: absolute;
bottom: 5rpx;
left: 50%;
transform: translateX(-50%);
}
}
}
}
.
nav-right{
width: 100rpx;
position: relative;
&::after{
box sizingcontent: '';
height: 50rpx;
width: 0;
border-right: 2rpx solid rgba($color: #333, $alpha: 0.3); position: absolute;
top: 11rpx;
left: 0;
}
}
.nav-image{
width: 40rpx;
height: 40rpx;
display: block;
margin: 16rpx auto;
}
}
.search-box{
padding: 10rpx 0;
.search-input-box{
width: 692rpx;
height: 64rpx;
box-sizing: border-box;
line-height: 62rpx;
border-radius: 32rpx;
color: rgba(16, 16, 16, 1);
font-size: 24rpx;
border: 1rpx solid rgba(179, 178, 178, 0);
margin: auto;
display: flex;
align-items: center;
position: relative;
.iconfont{
margin: 0 20rpx;
color: rgba(142, 142, 147, 1);
font-size: 28rpx;
}
.search-input{
width: 556rpx;
height: 48rpx;
color: rgba(136, 136, 136, 1);
font-size: 28rpx;
}
}
}
</style>
对代码的部分必要说明：下⾯注意注释的代码，seach这个icon⽤法是⼀致，看习惯哪⼀种写法，因复杂度⽽变<view class="search-input-box">
<!-- <view class="iconfont"></view> -->
<icon type="search" size="16"/>
<input class="search-input" placeholder="搜索商品名称或粘贴商品标题" />
<view ></view>
</view>
在⽗组件的引⽤如下：（需要⽤到的数据去腐组件做对应的操作）
<navc :list="navList" ref="navc" :navIndex="navIndex" @goodClassifyClick="goodClassifyClick"></navc> this.navList=res.data.categoryList
this.navList.unshift({
name:'推荐'
})
goodClassifyClick(index){
if(index==this.navIndex){
return
}
this.navIndex=index
this.pageNo=1
this.isLastPage=false
if(index!=0){
this.queryTargetCategoryById(this.navList[index].id)
}
},
对应的在⽗组件的操作先不⼀⼀写出来，主要是根据对应的功能⼀⼀来实现

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。