1.wxml
<view class="radio-view">
<view class="" wx:for="{
{imgList}}" class="radio-ball {
{imgIndex == index ? 'frame-show ' : 'frame-hide'}}" :key="index" wx:key="index">
<image class="conta-list" src="{
{item.img}}" mode="widthFix"></image>
</view>
</view>2.js
imgIndex:0,
imgList:[
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_1.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_2.png'},
{img: 'https://campaigncdn.herdsric.com/a2/load/a2_loading_3.png'},
{img: 'https://campaigncdn.herdsric.com/a2/load/a2_loading_4.png'},
{img: 'https://campaigncdn.herdsric.com/a2/load/a2_loading_5.png'},
{img: 'https://campaigncdn.herdsric.com/a2/load/a2_loading_6.png'},
{img: 'https://campaigncdn.herdsric.com/a2/load/a2_loading_7.png'},
{img: 'https://campaigncdn.herdsric.com/a2/load/a2_loading_8.png'},
{img: 'https://campaigncdn.herdsric.com/a2/load/a2_loading_9.png'},
{img: 'https://campaigncdn.herdsric.com/a2/load/a2_loading_10.png'},
{img: 'https://campaigncdn.herdsric.com/a2/load/a2_loading_11.png'},
{img: 'https://campaigncdn.herdsric.com/a2/load/a2_loading_12.png'},
{img: 'https://campaigncdn.herdsric.com/a2/load/a2_loading_13.png'},
{img: 'https://campaigncdn.herdsric.com/a2/load/a2_loading_14.png'},
{ img: 'https://campaigncdn.herdsric.com/a2/load/a2_loading_15.png'},
{ img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_16.png'},
{ img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_17.png'},
{ img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_18.png'},
{ img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_19.png'},
{ img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_20.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_21.png'},
{ img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_22.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_23.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_24.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_25.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_26.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_27.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_28.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_29.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_30.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_31.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_32.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_33.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_34.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_35.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_36.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_37.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_38.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_39.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_40.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_41.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_42.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_43.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_44.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_45.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_46.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_47.png'},
{img:' https://campaigncdn.herdsric.com/a2/load/a2_loading_48.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_49.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_50.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_51.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_52.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_53.png'},
{ img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_54.png'},
{ img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_55.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_56.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_57.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_58.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_59.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_60.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_61.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_62.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_63.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_64.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_65.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_66.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_67.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_68.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_69.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_70.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_71.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_72.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_73.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_74.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_75.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_76.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_77.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_78.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_79.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_80.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_81.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_82.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_83.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_84.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_85.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_86.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_87.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_88.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_89.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_90.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_91.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_92.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_93.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_94.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_95.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_96.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_97.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_98.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_99.png'},
{img:'https://campaigncdn.herdsric.com/a2/load/a2_loading_100.png'},
] imgTime() {
setInterval(() => {
this.data.imgIndex = this.data.imgIndex + 1;
this.setData({
imgIndex:this.data.imgIndex
})
if (this.data.imgIndex == 100) {
this.data.imgIndex = 0
}
}, 1000 / 16);
},
3.wxss
.radio-ball{
width: 300rpx;
height: 500rpx;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.conta-list{
width: 100%;
height: 100%;
}
.frame-show {
opacity: 1;
}
.frame-hide {
opacity: 0;
}