uniapp⼩程序长列表组件封装
<template>
<view class="goods_list">
<view class="goods_item" v-for="(item, index) in goods" :key="index" @click="navigate(item.tid)">
<image src="img14.360buyimg/mobilecms/s372x372_jfs/t1/100540/39/16145/157322/5e77599aE151edba7/9f71224e351687fa.jpg!q70.dpg.webp"    <view class="price">
<text>{{ item.pid }}</text>
<text>{{ item.tid }}</text>
reactnative原生列表
</view>
<view class="name">{{ item.title }}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
props: ['goods'],
methods: {
navigate(id){
this.$emit('goodsItemClick',id);
}
}
};
</script>
<style lang="scss">
.goods_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.goods_item {
background: #fff;
width: 355rpx;
margin: 10rpx 0;
padding: 15rpx;
box-sizing: border-box;
image{
width: 80%;
height: 150px;
display: block;
margin: auto;
}
.
price{
color: $shop-color;
font-size: 36rpx;
margin: 20rpx 0 5rpx 0;
text:nth-child(2){
color: #ccc;
font-size: 28rpx;
margin-left: 17rpx;
text-decoration: line-through;
}
}
.
name {
font-size: 28rpx;
line-height: 50rpx;
padding-bottom: 15rpx;
padding-bottom: 15rpx;
padding-top: 10rpx;
}
}
}
</style>
2.use.vue
<goods-list @goodsItemClick="goGoodsDetail" :goods="goods"></goods-list> <script>
import goodsList from '../../components/goods-list/goods-list.vue'
export default {
data() {
return {
goods:[],
}
},
components:{
'goods-list':goodsList
},
methods: {
// 导航到商品详情页
goGoodsDetail(tid){
uni.navigateTo({
url:'/pages/goods-detail/goods-detail?tid='+tid
})
}
}
}
</script>

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