Authored by huzhiming

fix(second): 修复列表样式 reviewed by tao.huang

... ... @@ -12,6 +12,11 @@ import Second from './second';
export default [
{
path: '/xianyu/yasTest',
name: 'yasTest',
component: () => import(/* webpackChunkName: "yasTest" */ './yasTest'),
},
{
path: '/xianyu',
redirect: { name: 'ChannelPage' },
},
... ...
<!--
* @description:
* @fileName: yasTest.vue
* @author: huzhiming
* @date: 2019-11-28 10:09:21
* @后台人员:
* @version: v1.0.0
* @path: 页面访问路径及参数说明
!-->
<template>
<div class="yasTest-wrap">
<div class="top">height:1000px</div>
<div :id="`box${item.id}`" class="box" v-for="(item, index) in yasList" :key="index">
<pre>
height:100px
id: {{item.id}}
</pre>
</div>
<div class="down">height:1000px</div>
</div>
</template>
<script>
// horizontal vertical
// initHorizontalExposure
import { debounce, throttle } from 'lodash';
const mixins = {
data() {
return {
yasList: [...Array(5).keys()].map((item,index)=>({id: index, offset:null}))
}
},
created() {},
mounted() {
console.log('init mixins');
window.addEventListener('scroll', debounce(this.handleScroll,500));
// window.addEventListener('scroll', throttle(this.handleScroll,500));
},
activated() {},
deactivated() {},
// beforeRouteEnter (to, from, next) {},
// beforeRouteUpdate(to, from, next) {},
// beforeRouteLeave(to, from, next) {},
destroyed() {},
methods: {
handleScroll(e) {
console.log(e);
}
},
computed: {},
watch: {},
components: {}
}
export default {
name: 'yasTest',
mixins: [mixins],
props: {},
data() {
return {}
},
created() {},
mounted() {},
activated() {},
deactivated() {},
// beforeRouteEnter (to, from, next) {},
// beforeRouteUpdate(to, from, next) {},
// beforeRouteLeave(to, from, next) {},
destroyed() {},
methods: {},
computed: {},
watch: {},
components: {}
};
</script>
<style rel='stylesheet/scss' lang='scss' scoped>
.yasTest-wrap {
background: #f5f5f5;
.box {
width: 100vw;
height: 200px;
&:nth-child(2n) {
background: red;
}
&:nth-child(2n+1) {
background: green;
}
}
.top,.down {
height: 2000px;
}
}
//@import "./style.scss";
</style>
... ...
... ... @@ -36,6 +36,7 @@ export default {
// 为了适配组件内数据,[apps/pages/second/components/second-list.vue]
product_list = product_list.map(item=>({
fromSize: true, // 特殊标识 解决列表组件样式问题
...item,
secondhand_image: item.image,
skup_price: item.price,
... ...