效果圖：
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-654520.html文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-654520.html
?
wxml（無(wú)縫滾動(dòng)：circular="true"）：
<!--components/tool_version/tool_version.wxml-->
<view class="tool-version">
<swiper class="tool-version-swiper" circular="true" loop="true" autoplay="true" interval="5000" duration="1000">
<swiper-item class="tool-version-swiper-item swiper-item1" wx:for="{{allToolData}}" wx:for-item="item" wx:key="index">
<view class="tool-version-item">
<view class="tool-version-item-title">
<view class="tool-verison-name {{versionClass[item.toolVersion]}}"> {{ versionName[item.toolVersion] }}</view>
<view class="tool-verison-price flex-center-between">
<view class="tool-verison-basic-rate"> ￥{{ item.basicRate }}<text>/場(chǎng)</text></view>
<view class="tool-verison-original-price">
原價(jià){{ item.originalPrice }}/場(chǎng)
</view>
</view>
</view>
<view class="tool-version-item-white">
<view class="tool-version-item-cont">
<view class="version-item-text flex-center-between">
<view class="version-item-text-left">基礎(chǔ)費(fèi)用</view>
<view class="version-item-text-right">{{ item.basicRate }}</view>
</view>
<view class="version-item-text flex-center-between">
<view class="version-item-text-left">標(biāo)準(zhǔn)時(shí)長(zhǎng)</view>
<view class="version-item-text-right">
{{
item.toolVersion === 1
? "不限"
: item.standardDuration+'天'
}}
</view>
</view>
<view class="version-item-text flex-center-between">
<view class="version-item-text-left">去版權(quán)l(xiāng)ogo</view>
<view class="version-item-text-right">
{{
item.toolVersion === 1
? "無(wú)":
item.toolVersion === 4
? "有"
:'無(wú)（加' +item.removeCopyrightPrice+'元）'
}}</view>
</view>
<view class="version-item-text flex-center-between">
<view class="version-item-text-left">最大參與人數(shù)</view>
<view class="version-item-text-right">{{ item.maxNumberPeople }}人</view>
</view>
<view class="version-item-text flex-center-between">
<view class="version-item-text-left">人數(shù)擴(kuò)容</view>
<view class="version-item-text-right">
{{
item.toolVersion !== 1
? '每增加100人增加'+item.numberPeopleExpansionPrice+'元' : "—"
}}
</view>
</view>
<view class="version-item-text flex-center-between">
<view class="version-item-text-left">時(shí)長(zhǎng)續(xù)約</view>
<view class="version-item-text-right">{{ item.basicRate }}</view>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>wxss：?
.flex-center-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.tool-version-swiper {
width: 100% !important;
height: 730rpx;
}
.tool-version-swiper-item {
width: 493rpx !important;
padding: 0 0 0 32rpx;
}
.tool-version-item-title {
width: 100%;
height: 207rpx;
background: linear-gradient(132deg, #EDF4FF 0%, #EBF8FF 100%);
box-shadow: 0 8rpx 43rpx 0 rgba(17, 72, 129, 0.06);
border-radius: 39rpx 0 0 0;
position: relative;
}
.tool-verison-name {
font-size: 32rpx;
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
font-weight: bold;
color: #242424;
line-height: 59rpx;
letter-spacing: 3rpx;
text-shadow: 0 8rpx 43rpx rgba(17, 72, 129, 0.06);
position: absolute;
left: 0;
top: 0;
padding: 13rpx 48rpx;
box-shadow: 0 8rpx 43rpx 0 rgba(17, 72, 129, 0.06);
border-radius: 41rpx 0 41rpx 0;
}
/* 免費(fèi)體驗(yàn)版 */
.version-sty1 {
background: #d3e4ff;
color: rgba(36, 36, 36, 1);
}
/* 基礎(chǔ)版 */
.version-sty2 {
background: #a4c7ff;
color: #0064ff;
}
/* 專(zhuān)業(yè)版 */
.version-sty3 {
background: #0064ff;
color: #ffffff;
}
/* 旗艦版 */
.version-sty4 {
background: linear-gradient(270deg,
#0064ff 0%,
#006cff 62%,
#00c1ff 100%);
color: #fff;
}
.tool-verison-price {
padding: 115rpx 32rpx 33rpx 48rpx;
}
.tool-verison-basic-rate {
font-size: 40rpx;
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
font-weight: bold;
color: #242424;
line-height: 59rpx;
text-shadow: 0 8rpx 43rpx rgba(17, 72, 129, 0.06);
}
.tool-verison-original-price {
font-size: 20rpx;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: rgba(36, 36, 36, 0.6);
line-height: 29rpx;
letter-spacing: 1rpx;
text-shadow: 0 8rpx 43rpx rgba(17, 72, 129, 0.06);
text-decoration: line-through;
}
.tool-version-item-white {
width: 100%;
background: #FFFFFF;
box-shadow: 0 8rpx 43rpx 0 rgba(17, 72, 129, 0.06);
}
.tool-version-item-cont {
padding: 53rpx 48rpx 57rpx 48rpx;
}
.version-item-text {
font-size: 22rpx;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #242424;
line-height: 33rpx;
letter-spacing: 1rpx;
text-shadow: 0 8rpx 43rpx rgba(17, 72, 129, 0.06);
}
.version-item-text:not(:last-child) {
margin-bottom: 43rpx;
}
.version-item-text-right {
font-weight: bold;
}js:
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
allToolData: [{
basicRate: 0,
durationRenewalPrice: null,
isLogo: 0,
isRefund: 0,
maxNumberPeople: 50,
numberPeopleExpansionPrice: null,
originalPrice: 0,
paySettings: null,
removeCopyrightPrice: null,
standardDuration: -1,
toolApplicationId: "1",
toolApplicationPriceId: "1",
toolVersion: 1,
},
{
basicRate: 188,
durationRenewalPrice: 50,
isLogo: 0,
isRefund: 1,
maxNumberPeople: 500,
numberPeopleExpansionPrice: 50,
originalPrice: 299,
paySettings: "PC_WX_PAY,PC_ALI_PAY,H5_WX_PAY,H5_ALI_PAY",
removeCopyrightPrice: 99,
standardDuration: 3,
toolApplicationId: "1",
toolApplicationPriceId: "3671774911571386373",
toolVersion: 2,
},
{
basicRate: 188,
durationRenewalPrice: 50,
isLogo: 0,
isRefund: 1,
maxNumberPeople: 500,
numberPeopleExpansionPrice: 50,
originalPrice: 299,
paySettings: "PC_WX_PAY,PC_ALI_PAY,H5_WX_PAY,H5_ALI_PAY",
removeCopyrightPrice: 99,
standardDuration: 3,
toolApplicationId: "1",
toolApplicationPriceId: "3671774911571386373",
toolVersion: 2,
},
{
basicRate: 288,
durationRenewalPrice: 50,
isLogo: 0,
isRefund: 1,
maxNumberPeople: 1500,
numberPeopleExpansionPrice: 50,
originalPrice: 499,
paySettings: "PC_WX_PAY,PC_ALI_PAY,H5_WX_PAY,H5_ALI_PAY",
removeCopyrightPrice: 99,
standardDuration: 10,
toolApplicationId: "1",
toolApplicationPriceId: "3674643125091639300",
toolVersion: 3,
},
{
basicRate: 388,
durationRenewalPrice: 50,
isLogo: 1,
isRefund: 1,
maxNumberPeople: 5000,
numberPeopleExpansionPrice: 50,
originalPrice: 799,
paySettings: "PC_WX_PAY,PC_ALI_PAY,H5_WX_PAY,H5_ALI_PAY",
removeCopyrightPrice: null,
standardDuration: 15,
toolApplicationId: "1",
toolApplicationPriceId: "3674643125091639301",
toolVersion: 4,
}
],
versionName: {
1: "免費(fèi)體驗(yàn)版",
2: "基礎(chǔ)版",
3: "專(zhuān)業(yè)版",
4: "旗艦版",
},
versionClass: {
1: "version-sty1",
2: "version-sty2",
3: "version-sty3",
4: "version-sty4",
},
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad(options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow() {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
*/
onHide() {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
*/
onUnload() {
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
*/
onPullDownRefresh() {
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom() {
},
/**
* 用戶(hù)點(diǎn)擊右上角分享
*/
onShareAppMessage() {
}
})到了這里，關(guān)于小程序swiper一個(gè)輪播顯示一個(gè)半內(nèi)容且實(shí)現(xiàn)無(wú)縫滾動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
