feat: 首次提交
This commit is contained in:
peerless_hero
@ -0,0 +1,80 @@
|
||||
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 6140 7 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
|
||||
<template>
|
||||
<view class="fui-wrap">
|
||||
<view class="fui-page__hd">
|
||||
<view class="fui-page__title fui-align__center" @tap="vip">HorizontalScroll <image
|
||||
src="/static/images/index/light/icon_member_3x.png"></image>
|
||||
</view>
|
||||
<view class="fui-page__desc">HorizontalScroll 横向滚动的视图容器，主要用于菜单导航，热门商品区等场景。</view>
|
||||
</view>
|
||||
<view class="fui-page__bd fui-page__spacing">
|
||||
<view class="fui-section__title">商品展示</view>
|
||||
<fui-horizontal-scroll background="rgba(255, 43, 43, .08)" scrollBarColor="#FF2B2B">
|
||||
<view class="fui-list">
|
||||
<view class="fui-list--item" v-for="(item,index) in goodsList" :key="index">
|
||||
<fui-lazyload radius="16" marginBottom="20" :width="128" :height="128" :src="item.src"
|
||||
mode="aspectFill">
|
||||
</fui-lazyload>
|
||||
<fui-text :text="`￥${item.price}`" color="#FF2B2B" size="24"></fui-text>
|
||||
</view>
|
||||
</view>
|
||||
</fui-horizontal-scroll>
|
||||
<view class="fui-section__title">菜单展示</view>
|
||||
<fui-horizontal-scroll>
|
||||
<view>
|
||||
<view class="fui-list" :class="{'fui-mtop':index!==0}" v-for="(list,index) in menuList" :key="index">
|
||||
<view class="fui-list--item fui-mr--52" v-for="(item,idx) in list" :key="item.text">
|
||||
<fui-lazyload background="transparent" marginBottom="12" :width="96" :height="96" :src="item.icon"
|
||||
mode="aspectFill">
|
||||
</fui-lazyload>
|
||||
<fui-text un-shrink :text="item.text" color="#888" size="24"></fui-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</fui-horizontal-scroll>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import data from './index.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goodsList: data.goodsList,
|
||||
menuList: data.menuList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vip() {
|
||||
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fui-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fui-list--item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
.fui-mr--52{
|
||||
margin-right: 52rpx;
|
||||
}
|
||||
|
||||
.fui-list--item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.fui-mtop{
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
</style>
|
||||
89
pages/component/layout/horizontal-scroll/index.js
Normal file
89
pages/component/layout/horizontal-scroll/index.js
Normal file
@ -0,0 +1,89 @@
|
||||
// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 18614 0 7 2 54 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
|
||||
const goodsList = [{
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
|
||||
price: '2800.00'
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
|
||||
price: '48.00'
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg',
|
||||
price: '29.90',
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_011.jpeg',
|
||||
price: '8.90'
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
|
||||
price: '2800.00'
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
|
||||
price: '48.00'
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_010.jpeg',
|
||||
price: '29.90',
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_011.jpeg',
|
||||
price: '8.90'
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_008.jpeg',
|
||||
price: '2800.00'
|
||||
}, {
|
||||
src: 'https://res.firstui.cn/static/images/component/waterfall/P_006.jpeg',
|
||||
price: '48.00'
|
||||
}]
|
||||
|
||||
const menuList = [
|
||||
[{
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '百亿补贴'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '查快递'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '实时低价'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '摇现金'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '家电清洗'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '活动日历'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '资质规则'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '限时秒杀'
|
||||
}],
|
||||
[{
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '签到'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '医药馆'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '断码清仓'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '爱回收'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '买车养车'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '家用电器'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '免费水果'
|
||||
}, {
|
||||
icon: '/static/images/common/icon_tabbar_2x.png',
|
||||
text: '充值中心'
|
||||
}]
|
||||
]
|
||||
export default {
|
||||
goodsList,
|
||||
menuList
|
||||
}
|
||||
Reference in New Issue
Block a user