用了wepy组件 ， 左右两边 分别是一个组件 （上代码了）
里面的域名是线上域名 用了sass 需要下载，拉走代码 直接出效果
1. 先上左边的组件
<style lang="scss">
page{
height: 100%;
}
::-webkit-scrollbar{
width: 0;
display: none;
}
.scroll_nav{
padding-bottom: 200rpx;
&_wrap{
height: 100%;
background: #fff;
}
&_items{
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 30rpx;
color: #000;
border-bottom: 1px solid #f4f6f8;
&_active{
color: #ca0707;
}
}
}
</style>
<template>
<scroll-view class="scroll_nav_wrap" scroll-y="true" scroll-top="{{navScrollTop}}" scroll-with-animation="true">
<view class="scroll_nav">
<repeat for="{{navDeails}}">
<view class="scroll_nav_items {{item.id == selectedId ? 'scroll_nav_items_active' : ''}}" id="{{item.id}}" data-index="{{index}}" @tap="selectedFn">{{item.name}}</view>
</repeat>
</view>
</scroll-view>
</template>
<script>
import wepy from 'wepy'
export default class ScrollNav extends wepy.component {
props = {
}
data = {
currentIndex: 0
}
props = {
navDeails: {
type: Array,
coerce: (res) => {
return res
}
},
selectedId:{
type: [Number, String],
coerce: (res) => {
return res
}
},
navScrollTop: {
type: [Number, String],
coerce: res => res
}
}
methods = {
selectedFn(e){
this.selectedId = e.currentTarget.id
this.currentIndex = e.currentTarget.dataset.index
this.$emit('change', this.currentIndex, this.selectedId)
}
}
}
</script>
2. 右边的组件
<style lang="scss">
.scroll_view{
&_wrap{
height: 100%;
background: #fff;
position: relative;
}
&_items{
min-height: 120rpx;
&_tit{
height: 58rpx;
view{
font-size: 30rpx;
font-weight: bold;
line-height: 58rpx;
padding-left: 1em;
border-bottom: 1px solid #eee;
}
}
// .tit_position{
// view{
// width: 100%;
// position: absolute;
// left: 0; top: 0;
// }
// }
&_children{
width: 100%;
padding: 34rpx 14rpx;
border-bottom: 1px solid #eee;
box-sizing: border-box;
display: flex;
&_img{
width: 160rpx;
height: 160rpx;
flex-shrink: 0;
background: {
size: cover;
repeat: no-repeat;
position: center center;
}
}
&_context{
margin-left: 16rpx;
font-size: 30rpx;
position: relative;
.name{
font-size: 30rpx;
overflow: hidden;
-webkit-line-clamp: 1;
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
box-sizing: border-box;
}
.price_wrap{
position: absolute;
bottom: 0; left: 0;
}
}
}
}
}
</style>
<template>
<scroll-view class="scroll_view_wrap" scroll-y="true" scroll-top="{{scrollTop}}" scroll-with-animation="true" @scroll="scrollFn">
<repeat for="{{viewDeails}}">
<view class="scroll_view_items">
<view class="scroll_view_items_tit {{inx[index] == positionIndex ? 'tit_position' : ''}}">
<view>
{{item.name}}
</view>
</view>
<repeat for="{{item.children}}" item="i">
<view class="scroll_view_items_children" data-id="{{i.id}}" @tap="goTo">
<view class="scroll_view_items_children_img" style="background-image: url({{i.thumb}})"></view>
<view class="scroll_view_items_children_context">
<view class="name">{{i.name}}</view>
<view class="price_wrap">
<text class="price">{{i.price}}</text>
</view>
</view>
</view>
</repeat>
</view>
</repeat>
</scroll-view>
</template>
<script>
import wepy from 'wepy'
export default class ScrollView extends wepy.component {
props = {
viewDeails: {},
scrollTop: {
type: [Number, String],
coerce: res => res
},
titleTop: {
type: Array,
coerce: res => res
}
}
data = {
positionIndex: 0,
inx: {}
}
watch = {
viewDeails(newVal){
let index = 0
this.inx = {}
Object.keys(newVal).forEach( (item, index) => {
this.inx[item] = index
})
this.$apply()
}
}
methods = {
scrollFn(e){
let selfTop = e.detail.scrollTop
this.positionIndex = this.getScrollTopIndex(selfTop)
this.$emit('change', this.positionIndex, selfTop)
},
goTo(e){
console.log(e)
const id = e.currentTarget.dataset.id
wepy.navigateTo({
url: `goodsInfo?id=${id}`
})
}
}
getScrollTopIndex(selfTop){
let currentIndex = 0
for(let i = 0, I = this.titleTop.length; i < I; i++){
if(i == I-1){
if(selfTop => this.titleTop[i]){
currentIndex = i
}
}else {
if(selfTop >= this.titleTop[i] && selfTop < this.titleTop[i + 1]){
currentIndex = i
break
}
}
}
return currentIndex
}
onLoad(){
}
}
</script>
3. page页面 来了
<style lang="scss">
page{
background: #f4f6f8;
}
.category_deails{
height: 100%;
display: flex;
&_nav{
width: 180rpx;
height: 100%;
flex-shrink: 0;
border-left: 1px solid #eee;
}
&_view{
flex: 1;
flex-shrink: 1;
height: 100%;
margin-left: 21rpx;
}
}
</style>
<template>
<view class="category_deails">
<view class="category_deails_nav">
<left-nav :navDeails.sync="navDeails" :selectedId.sync="selectedId" :navScrollTop.sync="navScrollTop" @change.user="navChange"></left-nav>
</view>
<view class="category_deails_view">
<view-scroll :viewDeails.sync="viewDeails" :scrollTop.sync="scrollTop" :titleTop.sync="titleTop" @change.user="viewChange"></view-scroll>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
import leftNav from '../components/ScrollNav'
import ScrollView from '../components/ScrollView'
// import retainedDecimalMoney from '../mixins/retainedDecimalMoney'
// import getExtJson from '../mixins/getExtJson'
export default class categoryScrollDetail extends wepy.page {
components = {
'left-nav': leftNav,
'view-scroll': ScrollView
}
data = {
api_host: 'https://www.xiaoniren.cn',
config_id: '634',
navDeails: [
{
idName: 'apply'
}
],
viewDeails: {
// apple: {
// name: '',
// children: [
// ]
// }
},
selectedId: 1,
titleTop: [],
scrollTop: 0,
navId: [],
navTop: [],
navScrollTop: 0
}
getCategoryData(){
return new Promise( (resolve, reject) => {
wepy.request({
url: `${this.api_host}/restapi/goods-category`,
data: {
config_id: this.config_id,
type: 0
},
success: res => {
if(res.data.success){
this.navDeails = res.data.data.items.filter( item => {
return item.level == 1
})
this.$apply()
resolve(this.navDeails)
}
}
})
})
}
getGoodsData(){
wepy.request({
url: `${this.api_host}/restapi/goods`,
data: {
config_id: this.config_id
},
success: res => {
this.navId = []
this.navDeails.forEach( element => {
this.viewDeails['s' + element.id] = {}
this.viewDeails['s' + element.id].name = element.name
this.navId.push(element.id)
this.viewDeails['s' + element.id].children = res.data.data.items.filter( item => {
if(item.category_id == element.id){
if(item.thumb.indexOf('http') == -1){
item.thumb = `${this.api_host}${item.thumb}`
}
// item.price = retainedDecimalMoney(item.price)
return item
}
})
})
this.$apply()
setTimeout(() => {
wx.createSelectorQuery()
.selectAll('.scroll_view_items_tit')
.boundingClientRect()
.exec( res => {
this.titleTop = res[0].map( item => {
return item.top
})
this.$apply()
this.navId.forEach( (item, index) => {
if(item == this.selectedId){
this.scrollTop = this.titleTop[index]
}
})
})
wx.createSelectorQuery()
.selectAll('.scroll_nav_items')
.boundingClientRect()
.exec( res => {
this.navTop = res[0].map( item => {
return item.top
})
this.$apply()
this.navId.forEach( (item, index) => {
if(item == this.selectedId){
wx.createSelectorQuery()
.select('.category_deails_nav')
.fields({
size: true
}).exec( res => {
if(res[0].height / 2 < this.navTop[index]){
this.navScrollTop = (43 * index - res[0].height / 2) + 120
}else{
this.navScrollTop = 0
}
})
}
})
})
}, 300)
}
})
}
methods = {
navChange(index, id){
if(this.scrollTop == this.titleTop[index]){
this.scrollTop = 0.01
return
}
this.scrollTop = this.titleTop[index]
},
viewChange(index, currentScrollTop){
this.selectedId = this.navId[index]
wx.createSelectorQuery()
.select('.category_deails_nav')
.fields({
size: true
}).exec( res => {
if(res[0].height / 2 < this.navTop[index]){
this.navScrollTop = (43 * index - res[0].height / 2) + 120
}else{
this.navScrollTop = 0
}
})
}
}
onLoad(option){
// getExtJson.call(this)
// wepy.showLoading({
// title: '加载中...',
// mask: true
// })
// wepy.setNavigationBarTitle({
// title: option.name
// })
this.getCategoryData().then( res => {
this.getGoodsData()
})
this.selectedId = +option.id
this.$apply()
}
}
</script>
扫一扫
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
