<scroll-view class="container" scroll-y="true" bindscrolltolower="scrolltolower" lower-threshold="300" style="height:100%;"> <view class="up-list"> <view class="up-list-item" wx:for="{{articles}}" wx:for-item="article" wx:key="aid"> <navigator url="../article/article?id={{article.aid}}"> <view class="item-desc-container"> <!-- <text>{{index}}</text> --> <image class="item-img" src="{{article.thumb_image_url}}"></image> <view class="info-view"> <text class="title">{{article.title}}</text> <view class="target-word"> <block wx:for="{{article.rendered_keywords}}" wx:key="index"> <text wx:if="{{index === 0}}" class="keyword">{{ item }} </text> <text wx:else> {{ item }} </text> </block> </view> </view> </view> </navigator> </view> <import src="../../common/loading.wxml"/> <template is="loading" data="{{done, text:'只有这些啦~'}}"/> </view> </scroll-view> |
.search-box{ background-color: rgb(242,63,65); } /* 上部横条结构卡片 */ .up-list { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; background-color: #fff; } .up-list-item navigator { padding: 15px 15px 0 15px; } .item-desc-container { -webkit-flex: 1; flex: 1; display: -webkit-flex; display: flex; border-bottom: 1px rgb(237,237,237) solid; padding-bottom: 15px; } .item-img { width: 160rpx; height: 160rpx; } .info-view { -webkit-flex: 1; flex: 1; margin-left:15px; font-size: 12px; color:#999; } .title { font-size:28rpx; /*line-height: 1.45;*/ height: 126rpx; color:#080808; /*margin-bottom: 10px;*/ word-break: break-all; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: start; -webkit-line-clamp: 2; } .title, .price { -webkit-flex:1; flex:1; display: -webkit-flex; display: flex; } .target-word{ margin-top: 6rpx; } .keyword{ color: #ff685c; } .other-word{ margin-left: 6px; color:#999; } /*.rectangle-bounce { text-align: center; height:50px; } .rectangle-bounce view { height: 100%; width: 7px; margin: 0 3px 0 0; background-color: #e60012; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out } .rectangle-bounce .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s } .rectangle-bounce .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s } .rectangle-bounce .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s } .rectangle-bounce .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); } }*/ |
import common from '../../common/app' import category from '../../common/category' const loadingLength = 20 const loadingStart = 0 let pageLength = loadingLength let start = loadingStart const page = { onLoad(options) { console.log(options); // 来自gotogo or viewall const key = options.key || 'allRaiders' console.log('all onload...'); // 那次重启页面都重置初始条件,否则在手机上会缓存这两个变量的值 // 下次进来时,会以上次设置的值作为初始值 pageLength = loadingLength start = loadingStart wx.getStorage({ key:key, success: (result) => { console.log('获取本地存储allRaiders的数据:', result) this.loadNewPage(result.data) }, fail(result){ console.log('获取本地存储allRaiders错误:', result) } }) } ,scrolltolower(){ this.loadNewPage() } // 滚动到底部事件监听 -start ,loadNewPage(allArticles = this.allArticles){ if(!allArticles || allArticles.length === 0 ) return; const end = start + pageLength const alreadyDisplayArticles = this.data.articles || [] const shouldLoadArticles = allArticles.slice(start, end) const articles = alreadyDisplayArticles.concat(shouldLoadArticles) console.log("articles.length:",articles.length); console.log("allArticles.length:",allArticles.length); if(articles.length === allArticles.length){ setTimeout(() => { this.setData({ done: true }) }, 120) }else{ this.setData({ done: false }) } this.setData({ articles }) this.allArticles = allArticles start += pageLength } // 滚动到底部事件监听 -end } Object.assign(page, common) Page(page) |
模板简介:该模板名称为【微信小程序礼物挑选神器文章图文列表样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。