//组件wxml<view class="home-party" style="padding-top:10px;"><view><view class="home-party-title">{{name}}</view><view class="home-party-subtitle">{{title}}</view> <span class="iconfont icon- jiantouyou-xian" style="top:36px;"></span></view><view class="home-party-items"><scroll-view scroll-x="true" style=" white-space: nowrap; display: flex"><view wx:for="{{list}}" class="home-party-item" wx:key="index" bindtap="getopendetail" data-id="{{item.id}}"><image src="{{item.img}}" /><view class="home-tb-type">{{item.label}}</view><view class="home-party-name">{{item.title}}</view><view class="home-party-info"><span>{{item.spans}} | {{item.num}}</span></view><view class="home-party-price-m1"><span class="home-party-price-m1-text">{{item.money}}</span></view></view></scroll-view><view style="width:40px;display:inline-block;"></view></view></view>
//jsComponent({/*** 组件的属性列表*/properties: {// 便签名name: {type: String,value: ""},// 描述文案title: {type: String,value: ""},// 滚动数据来源list: {type: Array,value: []}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {/***跳转详情页 * @param {传递参数} item */getopendetail:function(item) {this.triggerEvent('getopendetail', { param:item.currentTarget.dataset.id});}}})
.home-party {padding-top: 60rpx;position: relative;overflow: hidden;text-align: center;width: 100%;}.home-party .home-party-title {font-size: 40rpx;color: #2d2d2d;font-weight: 700;padding: 0 30rpx;text-align: left;}.home-party .home-party-subtitle {font-size: 28rpx;color: #999;line-height: 60rpx;text-align: left;height: 60rpx;padding: 0 30rpx;}.home-party .icon-jiantouyou-xian {background: #f5f5f5;position: absolute;top: 57px;right: 15px;width: 24px;height: 24px;color: #b2aeae;font-size: 14px;text-align: center;line-height: 24px;border-radius: 12px;}.home-party .home-party-items {width: 95%;/* height: 480rpx; */display: inline-block;margin: 0 auto;padding-left: 10rpx;}.home-party .home-party-items .home-party-item {vertical-align: top;width: 320rpx;height: 380rpx;display: inline-block;margin-right: 20rpx;position: relative;background: #fff;border: 0 solid #f5f5f5;box-shadow: 0 4rpx 40rpx 0 rgba(0,0,0,.1);border-radius: 8rpx;overflow: hidden;}.home-party .home-party-items .home-party-item image {height: 200rpx;width: 100%;}.home-party .home-party-items .home-tb-type {background-image: linear-gradient(269deg,#ffd268,#ffb200);width: 100rpx;}.home-party .home-party-items .home-tb-type {border-radius: 0 0 8rpx 0;font-size: 20rpx;color: #fff;left: 0;top: 0;position: absolute;line-height: 40rpx;height: 40rpx;text-align: center;}.home-party .home-party-items .home-party-name {font-size: 24rpx;color: #222;padding: 0 20rpx;white-space: pre-line;font-weight: 700;text-align: justify;line-height: 40rpx;}.home-party .home-party-items .home-party-info {font-size: 20rpx;color: #666;padding: 0 20rpx;text-align: left;line-height: 40rpx;}.home-party .home-party-items .home-party-price-m1 {position: absolute;bottom: 20rpx;right: 20rpx;}.home-party .home-party-items .home-party-price-m1 .home-party-price-m1-text {font-weight: 700;font-size: 24rpx;color: #f9541c;}.home-party .home-party-items .home-party-price-m1 .home-party-price-m1-text:after {content: "元起";font-size: 16rpx;color: #666;font-weight: 400;}
//引用方式//第一步骤：JSON{"usingComponents": {"img-text": "/commpents/imgtext/imgtext"},"navigationBarBackgroundColor": "#FF563A"}//第二步骤：wxml<img-text list="{{list2}}" name="年会热卖" title="传统主题轰趴旅行各种年会统统都有" bind:getopendetail="getopendetail"></img-text>//第三步骤：jslist2: [{id: 1,label: "旅行团建",title: "使徒行者 卧底风云】趣味徒步主题团建",spans: "1天0晚",num: "30-200人",img: "/it/u=1848483831,4021622163&fm=26&fmt=auto&gp=0.jpg",money: "464"}, {id: 2,label: "旅行团建",title: "使徒行者 卧底风云】趣味徒步主题团建",spans: "1天0晚",num: "30-200人",img: "/it/u=1848483831,4021622163&fm=26&fmt=auto&gp=0.jpg",money: "464"}, {id: 3,label: "旅行团建",title: "使徒行者 卧底风云】趣味徒步主题团建",spans: "1天0晚",num: "30-200人",img: "/it/u=1848483831,4021622163&fm=26&fmt=auto&gp=0.jpg",money: "464"}, {id: 4,label: "旅行团建",title: "使徒行者 卧底风云】趣味徒步主题团建",spans: "1天0晚",num: "30-200人",img: "/it/u=1848483831,4021622163&fm=26&fmt=auto&gp=0.jpg",money: "464"},{label: "旅行团建",id: 5,title: "使徒行者 卧底风云】趣味徒步主题团建",spans: "1天0晚",num: "30-200人",img: "/it/u=1848483831,4021622163&fm=26&fmt=auto&gp=0.jpg",money: "464"},]
