本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自己留个笔记,废话不多说了,具体如下:
效果图如下:
wxml:
& lt;视图类=癷tem-box”比;
& lt;视图类=拔锲贰北?
& lt;观点wx:="{{列表}}”天气:关键=皗{指数}}”类=跋钅俊痹?
& lt;视图bindtouchstart=罢础眀indtouchmove=皌ouchM bindtouchend”=皌ouchE”材料指数=皗{指数}}”类=澳谠趖xt”比;
& lt;图像类=跋钔急辍蹦Ｊ?" widthFix " src=" https://www.yisu.com/zixun/{{item.url}}”祝辞& lt;/image>
& lt; i>{{item.name}} & lt;/i>
祝辞& lt;跨类="项数据”;
& lt;我类=皉ankpace”比;{{item.steps}} & lt;/i>
& lt;/span>
& lt;/view>
& lt;/view>
& lt;/view>
& lt;/view>
之前
wxs:
/*页/leftSwiperDel/索引。wxs */视图{
box-sizing: border-box;
}
.item-box {
宽度:700 rpx;
保证金:0汽车;
填充:40 rpx 0;
}
. items {
宽度:100%;
}
.item {
位置:相对;
border-top: 2 rpx固体# eee;
身高:120 rpx;
行高:120 rpx;
溢出:隐藏;
}
.item:胎{
边界底部:2 rpx固体# eee;
}
在{
位置:绝对的;
上图:0;
}
.inner.txt {
background - color: # fff;
宽度:100%;
z - index: 5;
填充:0 10 rpx;
过渡:左0.2 s ease-in-out;
空白:nowrap;}
溢出:隐藏;
文本溢出:省略;
}
.inner.del {
background - color: # e64340;
宽度:180 rpx; text-align:中心;
z - index: 4;
右:0;
颜色:# fff
}
.item-icon {
宽度:64 rpx;
身高:64 rpx;
vertical-align:中间;
margin-right: 16 rpx;
margin-left: 13 px;
这个特性:50%;
}
.item-data {
浮:正确;
margin-right: 5%;}
.rankpace {
颜色:# fa7e04;
}
之前
js:
//页面/leftSwiperDel/index.js
页面({
数据:{
列表:空,
},
onLoad:功能(选项){
var=这个;//加载数据
wx.request ({
url:“https://pig.intmote.com/bison_xc/wx/sort.do”,
方法:“得到”,
标题:{
“内容类型”:“application/json”
},
成功:函数(res) {
console.log (res.data)
那setData({列表:res.data});
},
}）;
},
}）
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
