卡片轮询
Posted 未名胡
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了卡片轮询相关的知识，希望对你有一定的参考价值。
<view class="back-view">
<swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" current="0" data-index="index" bindchange="swiperChange">
<block wx:for="list" wx:index="index">
<swiper-item class="swiper-item">
<view class="slide-image swiperIndex == index ? 'active' : ''">
<view class="swiper-item-top">
<view class="swiper-item-top-text">
<view>item.title</view>
<view>—</view>
</view>
<image src="item.image"></image>
</view>
<view class="content-view">
<view class="swiper-item-content">
<text>item.text</text>
</view>
</view>
<view class="item-content-bottom"></view>
</view>
</swiper-item>
</block>
</swiper>
<view class="scrolls">
<scroll-view class="weui-navbar" scroll-x="true" scroll-left="x" scroll-with-animation="true">
<block wx:for-items="tabs">
<view id="index" class="activeIndex == index ?'item_on':'' default-item" data-index="index" style="width:tabWpx">
<view class="activeIndex == index ?'image_view_top_on':'' image_view_top">
<image class="activeIndex == index ?'image_on':'' image_not"src="activeIndex == index ?item.btns:item.btn"></image>
</view>
<view style="font-size: 24rpx;" class="activeIndex == index ?'text-color-on':''text-color">item.text</view>
</view>
</block>
<view class="weui-navbar-slider" style="transform:translateX(slideOffsetpx);"></view>
</scroll-view>
</view>
</view>
.back-view
background-color: #3E3538;
.swiper-block
height: 1000rpx;
width: 100%;
margin-top: 30px;
.swiper-item
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow:unset;
.slide-image
height:700rpx;
width: 520rpx;
border-radius: 9rpx;
box-shadow: 0px 0px 30rpx rgba(0, 0,0,.2);
margin: 0rpx 30rpx;
z-index: 1;
.active
transform: scale(1.15);
transition:all .2s ease-in 0s;
z-index: 20;
.swiper-item-top
border-radius: 9rpx;
height:250rpx;
.swiper-item-top image
display: block;
width:100%;
height:100%;
border-radius: 9rpx 9rpx 0rpx 0rpx;
.swiper-item-top-text
position: fixed;
width:300rpx;
height:100rpx;
margin-top:50rpx;
margin-left: 30rpx;
color: #fff;
font-weight: bold;
.content-view
width: 520rpx;
height: 450rpx;
background-color: #fff;
border-radius: 0rpx 0rpx 9rpx 9rpx;
/* border:1px solid red; */
.swiper-item-content
width: 520rpx;
height: 330rpx;
position: absolute;
text-overflow:ellipsis;
word-wrap:break-word;
overflow: hidden;
padding:20rpx;
background-color: #fff;
font-size: 28rpx;
.item-content-bottom
position: fixed;
width: 520rpx;
height: 100rpx;
margin-top:270rpx;
background:linear-gradient(#fff,#fff);
opacity:0.8;
.scrolls
height:200rpx;
white-space:nowrap;
overflow:hidden;
.weui-navbar .default-item
/*width:25%;*/
width:25%;
display: inline-block;
text-align: center;
font-size: 32rpx;
box-sizing: border-box;
height:200rpx;
margin-left: 20rpx;
padding-bottom: 20rpx;
.weui-navbar .item_on
color: #fff;
.image_view_top
border:1px solid #363032;
width:100rpx;
height:100rpx;
margin:20rpx auto;
border-radius: 100rpx;
background-color: #363032;
.image_view_top_on
border:1px solid #202022;
width:100rpx;
height:100rpx;
margin:20rpx auto;
border-radius: 100rpx;
background-color: #202022;
.image_not
display: block;
width:80rpx;
height: 80rpx;
margin:10rpx auto;
.text-color
color: #BDADA5;
.text-color-on
color: #fff;
// pages/privilege/privilege.js
Page(
/**
* 页面的初始数据
*/
data:
list:[
id:1,
title:"直升白金卡",
image:"https://img.mukewang.com/5a72827d0001cb8006000338-240-135.jpg",
text:"上周新开发的一款功能强大的答题考试小程序，代码可二次开发！随意修改！分为六大功能，模拟考，练习册，收藏本，错题本，排名，公告栏。试卷支持二级分类，模拟考可以从科目中随机抽取一定数量的题目做答，答完后出分并显示哪些对哪些错，错题自动收录到错题本中。模拟考则是分小节进行答题，可以进行多题跳转，可以对题目收藏，题目中可以带图片，以及可以带解析。答完题后会显示出当前用户在该小节下的正确率。收藏本和错题本则可记录用户收藏和答错的题，方便练习。排行榜则实时的统计用户的分数排名。并且可以给每套试卷设置密码，只有输对密码的用户才可以进入，防止题目外泄。 整个小程序非常适合单位、公司和学校进行人员考核、测评等一系列以考促学的活动。代码结构清晰，定期维护更新。",
btn:"../images/collections.png",
btns:"../images/collection.png"
,
id:2,
title: "直升白金卡",
image: "https://img.mukewang.com/5a72827d0001cb8006000338-240-135.jpg",
text: "上周新开发的一款功能强大的答题考试小程序，代码可二次开发！随意修改！分为六大功能，模拟考，练习册，收藏本",
btn: "../images/collections.png",
btns: "../images/collection.png"
,
id: 3,
title: "直升白金卡",
image: "https://img.mukewang.com/5a72827d0001cb8006000338-240-135.jpg",
text: "上周新开发的一款功能强大的答题考试小程序，代码可二次开发！随意修改！分为六大功能，模拟考，练习册，收藏本",
btn: "../images/collections.png",
btns: "../images/collection.png"
,
id: 3,
title: "直升白金卡",
image: "https://img.mukewang.com/5a72827d0001cb8006000338-240-135.jpg",
text: "上周新开发的一款功能强大的答题考试小程序，代码可二次开发！随意修改！分为六大功能，模拟考，练习册，收藏本",
btn: "../images/collections.png",
btns: "../images/collection.png"
,
id: 3,
title: "直升白金卡",
image: "https://img.mukewang.com/5a72827d0001cb8006000338-240-135.jpg",
text: "上周新开发的一款功能强大的答题考试小程序，代码可二次开发！随意修改！分为六大功能，模拟考，练习册，收藏本",
btn: "../images/collections.png",
btns: "../images/collection.png"
],
tabs: [
id:1,
text:"综合与绘画1",
btn: "../images/collections.png",
btns: "../images/collection.png"
,
id: 1,
text: "综合与绘画2",
btn: "../images/collections.png",
btns: "../images/collection.png"
,
id: 1,
text: "综合与绘画3",
btn: "../images/collections.png",
btns: "../images/collection.png"
,
id: 1,
text: "综合与绘画3",
btn: "../images/collections.png",
btns: "../images/collection.png"
,
id: 1,
text: "综合与绘画3",
btn: "../images/collections.png",
btns: "../images/collection.png"
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000,
activeIndex:0,
swiperIndex:0
,
swiperChange(e)
const that = this;
that.setData(
activeIndex: e.detail.current,
swiperIndex: e.detail.current,
)
that.xwidth(e);
,
//计算x的大小
xwidth:function(e)
let screenWidth = wx.getSystemInfoSync().windowWidth;
let itemWidth = screenWidth / 5;
// const tabs = this.data.tabs;
let scrollX = itemWidth * e.detail.current - itemWidth * 2;
let maxScrollX = (this.data.tabs.length + 1) * itemWidth;
if (scrollX < 0)
scrollX = 0;
else if (scrollX >= maxScrollX)
scrollX = maxScrollX;
this.setData(
x: scrollX
)
,
tabClick:function(e)
const that = this;
that.setData(
activeIndex: e.currentTarget.dataset.index,
swiperIndex: e.currentTarget.dataset.index,
)
,
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options)
,
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function ()
,
/**
* 生命周期函数--监听页面显示
*/
onShow: function ()
,
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function ()
,
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function ()
,
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function ()
,
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function ()
,
/**
* 用户点击右上角分享
*/
onShareAppMessage: function ()
)
以上是关于卡片轮询的主要内容，如果未能解决你的问题，请参考以下文章