간단한 목록 기능 구현
목록 구성 요소 for 구성 요소에 대한 그룹을 추가하면 목록 구성 요소를 실현할 수 있습니다
wxml 코드
<block wx:for="{{yetinglist}}">
<view class='waibian' bindtap="readDetail" data-id="{{item.title}}">
<image src="{{item.smallLogo}}" class='leftimagecss'></image>
<view class='righttextcss'>
<text class='titlecss'>【 】{{item.title}}</text>
<text class='nicenamecss'>{{item.nickname}}</text>
<view class='timecss'>
<text class='playcunnter'> :{{item.playtimes}}</text>
<text class='time'> :{{item.likes}}</text>
</view>
</view>
</view>
</block>
index.js 코드
Page({
data: {
yetinglist:[],
}
//
readDetail: function(e) {
//
wx.navigateTo({
url: '../twoVC/twovc?id='+e.currentTarget.dataset.id
})
// console.log(e.currentTarget.dataset.id);
},
//
onLoad: function () {
var that =this;
//
wx.request({ url:'http://mobile.ximalaya.com/mobile/v1/album/track/ts-1499312754612?albumId=260769&device=iPhone&isAsc=true&pageId=1&pageSize=20&',
success:function(res) {
console.log(res.data.data.list)
that.setData({
yetinglist:res.data.data.list,
})
}
})
}
})
wxxml 코드
.waibian{
display: -webkit-flex; /* Safari */
-webkit-justify-content: initial; /* Safari 6.1+ */
display: flex;
justify-content: initial;
}
.leftimagecss{
margin-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
width:40%;
height:110px;
border-radius:10px;
}
.righttextcss{
margin-left: 10px;
height: 110px;
width: 70%;
flex-wrap: wrap;
display: flex;
align-content: Space-around;
}
.titlecss{
height: 40px;
width: 100%;
margin-top: 5px;
font-size:medium;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.nicenamecss{
width: 100%;
height: 30px;
font-size:small;
-webkit-text-fill-color: lightgray;
}
.timecss{
height: 20px;
width: 100%;
display: flex;
justify-content: space-between;
}
.playcunnter{
font-size:small;
-webkit-text-fill-color: blueviolet;
}
.time{
margin-right: 10px;
font-size:small;
-webkit-text-fill-color: lawngreen;
}
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
위챗 프로그램 개발에서 직면한 몇 가지 사소한 문제를 깊이 있게 분석하다로컬 그림이 표시되지 않으면 개발 도구가 실행되는 것은 문제없지만, 실제 디버깅은 표시되지 않습니다 자세히 관찰한 결과 경로는 문제없다. 문제는 사진 이름이 중국어가 될 수 없다는 것이다. 이를 자모+숫자로 바꾸면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.