|
<template>
<view>
<!--search-->
<view class="search_container">
<view class="search_box">
<image class="search_img" src="../../images/main1/search.png"></image>
<input class="search_int" type="text" placeholder="请输入搜索内容" confirm-type="search"
oninput="onInput" onconfirm="search"></input>
</view>
<text class="search_btn" onclick="cancel">搜索</text>
</view>
<!--parent-->
<view style={"height:"+(this.props.select.first==0?"50px":"100px")}>
<scroll-view class="sort" scroll-x scroll-y="false" scroll-enabled bounces show-scrollbar="false">
<text class={this.props.select.first==0 ?'catnav_s':'catnav'} style="height:50px;line-height: 50px;" @click="change_cart(0,1)">热门推荐</text>
<text v-for="(d,i) in this.props.catnav.parent" style="height:50px;line-height: 50px;" class={this.props.select.first==d.id ?'catnav_s':'catnav'} data-id={d.id}
@click="change_cart(d.id,1)">{d.name}</text>
</scroll-view>
<!--children -->
<scroll-view class="sort" scroll-x scroll-y="false" scroll-enabled bounces show-scrollbar="false"
v-if="this.props.select.first !=0 && this.props.catnav.children[String(this.props.select.first)].length>=1">
<text v-for="(d,i) in this.props.catnav.children[String(this.props.select.first)]" style="height:30px;line-height: 30px;" class={this.props.select.secend==d.id
?'catnav_s':'catnav'} data-id={d.id} @click="change_cart(d.id,2)">{d.name}</text>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
name: 'list-nav',
methods: {
change_cart(id,type){
this.fire('change_cart', {id:id,type:type});
}
}
}
</script>
<style scoped>
/* search */
.search_container {
flex-direction: row;
align-items: center;
height: 44px;
background-color: #fff;
}
.search_box {
flex-direction: row;
align-items: center;
flex: 1;
height: 30px;
background-color: #f5f5f5;
border-radius: 15px;
margin-left: 15px;
}
.search_img {
width: 12px;
height: 12px;
margin-left: 13px;
margin-right: 6px;
}
.search_int {
flex: 1;
font-size: 12px;
color: #333;
background-color: transparent;
border: none;
}
.search_btn {
color: #666;
font-size: 12px;
padding: 0 15px;
}
.sort {
flex-direction: row;
overflow: hidden;
padding: 0;
}
.catnav {
padding: 0 10px;
font-size: 12px;
color: rgb(80, 80, 80);
font-weight: normal;
}
.catnav_s {
font-weight: bold;
padding: 0 10px;
font-size: 12px;
color: #ff5555;
}
</style>
上面那段代码是下方的列表是scroll-y的,在微信上面不能触发分页,上面代码中用的list-nav模板组件就是一个可以横向滚动的代码,但是在小程序上面是竖排排列的 |
|