作业页面创建和旋转图表
1、效果贴图。
2、代码。
Logs.wxml
View class='outSty '
扫频器
indicator-dots=' { { indicator dots } } '
自动播放=' { {自动播放}} '
Interval='{{interval}} '
Duration='{{duration}} '
Circular='{{true}} '
Swiper-item
image src='；FM=26 fmt=auto ' mode=' aspect fill ' style=' width :100% '/image
/swiper-item
Swiper-item
image src='；FM=26 fmt=auto ' mode=' aspect fill ' style=' width :100% '/image
/swiper-item
/swiper
！-通知-
Van-notice-bar
类=' OPC '
Color='orange '
Background='rgba(0，0，0， 9)'
left-icon=' volume-o '
' Scrollable text='技术是开发它的人的共同灵魂。
" /> <!-- 商品 --> <view class="storeBody"> <van-tabs> <van-tab title="男频"> <van-card centered="true" lazy-load wx:for="{{taskDataList}}" wx:key="index" data-item="{{item}}" bindtap="goDetail" > <view slot="title"> <text class="textTit">{{i}}</text> <van-tag type="primary">{{i}}</van-tag> </view> <view slot="desc"> <text class="groupName">{{i}}</text> <view class="proceOut"> <text class="ts">日更：{{i}}ㅤ试稿：{{i}}</text> <text class="pricesty">千字{{i}}</text> </view> </view> </van-card> </van-tab> <van-tab title="女频">女频</van-tab> <van-tab title="招聘">招聘</van-tab> <van-tab title="其他">其他</van-tab> </van-tabs> <view class="fotter">—— 没有更多 ——</view> </view> </view>logs.wxss
.outSty {
background-color: #EEE8E8;
height: calc(100vh);
}
.van-card__ {
height: 150rpx;
}
.van-card__con {
min-height: 0 !important;
}
.van-card {
border: 1px solid #f3f1f1;
background-color: #f3e4e1;
}
.groupName {
margin-top: 10rpx;
font-size: 21rpx;
color: #fbb450;
border: 1px solid #fbb450;
border-radius: 8rpx;
padding-left: 9rpx;
padding-right: 9rpx;
position: relative;
top: 7rpx;
}
.textTit {
font-size: 36rpx;
font-weight: 600;
margin-right: 30rpx;
}
.proceOut {
padding-bottom: 10rpx;
position: relative;
}
.ts {
position: relative;
color: rgb(145, 144, 144);
font-size: 30rpx;
top: 16rpx;
}
.pricesty {
color: red;
font-size: 40rpx;
font-weight: 600;
position: absolute;
right: 0;
top: -23rpx;
}
.van-ellipsis {
font-size: 39rpx;
}
.van-notice-bar {
opacity: 0.8;
}
.opc {
position: relative;
}
.storeBody {
/* margin-top: -93rpx; */
}
.fotter {
color: #ccc;
font-size: 14px;
text-align: center;
padding: 18rpx 0;
background-color: #EEE8E8;
}
logs.js
Page({
data: {
indicatorDots: true,
autoplay: true,
interval: 4000,
duration: 1000,
taskDataList:[
{
taskTitle: '10-11 男频都市续写',
taskTag: '长期续写',
studioName: 'xxx工作室',
dayWrite: '10000',
trialDraft: '2000',
price: '8+'
},
{
taskTitle: '10-13 男频恐怖悬疑定制',
taskTag: '定制',
studioName: 'xxx工作室',
dayWrite: '10000',
trialDraft: '2000',
price: '18'
},
{
taskTitle: '10-14 男频开头文定制',
taskTag: '定制',
studioName: 'xxx工作室',
dayWrite: '12000',
trialDraft: '2000',
price: '25'
},
{
taskTitle: '10-11 男频火影大纲',
taskTag: '大纲',
studioName: 'xxx工作室',
dayWrite: '10000',
trialDraft: '2000',
price: '40+'
},
{
taskTitle: '10-11 男频都市续写',
taskTag: '长期续写',
studioName: 'xxx工作室',
dayWrite: '10000',
trialDraft: '2000',
price: '18'
},
{
taskTitle: '10-11 男频都市续写',
taskTag: '长期续写',
studioName: 'xxx工作室',
dayWrite: '10000',
trialDraft: '2000',
price: '18'
},
{
taskTitle: '10-11 男频都市续写',
taskTag: '长期续写',
studioName: 'xxx工作室',
dayWrite: '10000',
trialDraft: '2000',
price: '18'
},
],
},
onLoad() {
},
onPullDownRefresh: function () { // 下拉刷新
var page = getCurrentPages().pop(); // 得到这个页面对象
(); // 调用页面的onLoad()方法进行刷新页面
wx.stopPullDownRefresh() // 刷新成功后停止下拉刷新
},
goDetail(){ // 跳转详情页
},
})
a的usingComponents里添加
"van-tag": "@vant/weapp/tag/index" 本节课视频：06任务页编写及轮播图
1.《关于100vh我想说06复制粘贴写小程序之任务页编写及轮播图源码笔记》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《关于100vh我想说06复制粘贴写小程序之任务页编写及轮播图源码笔记》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/guonei/2026439.html
