微信小程序礼物挑选神器攻略列表样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<!-- import写在顶部会出问题。不知道原因。。 -->
<scroll-view
  class="container"
  scroll-y="true"
  bindscrolltolower="scrolltolower"
  lower-threshold="300"
  style="height:100%;">
  <!-- <view class="search-box">
   <view class="bg-image"></view>
   <input class="search-input" placeholder="搜索你想要的礼物" placeholder-class="placeholder-style" bindchange="bindChange"/>
   <view class="search-btn">
     <icon type="search" bindtap="confirm"/>
   </view>
  </view> -->
  <!-- 功能区 -->
  <view class="function-area">
    <!-- <view class="tag"><text>挑礼神器</text></view> -->
    <view class="function-list">
      <navigator url="../filter/filter" hover-class="navigator-hover">
        <view class="function">
            <image src="icon/filter.png"></image>
            <text>礼物挑选器</text>
        </view>
      </navigator>
      <!-- <navigator url="../filter/filter" hover-class="navigator-hover">
        <view class="function">
            <image src="icon/secretary.png"></image>
            <text>有调小秘书</text>
        </view>
     </navigator> -->
     <navigator url="../gotogo/gotogo" hover-class="navigator-hover">
        <view class="function no-border">
            <image src="icon/gotogo.png" style="width:88rpx;height:60rpx;"></image>
            <text>逛一逛</text>
        </view>
     </navigator>
    </view>
  </view>
  <!-- meta列表 -->
  <view class="metainfo-area">
    <text class="tag" data-tag="攻略"></text>
    <view class="up-list">
      <block wx:for="{{meta_infos}}" wx:key="nid" wx:for-item="meta_info">
        <view class="up-list-item">
          <navigator url="../article/article?id={{meta_info.nid}}">
             <view class="item-desc-container">
                <!-- <text>{{index}}</text> -->
                <image class="item-img" src="{{meta_info.thumb_image_url}}"></image>
                <view class="info-view">
                  <text class="title">{{meta_info.title}}</text>
                  <view class="content"></view>
                  <view class="item-footer">
                    <view class="item-footer-author">
                      <image src="{{meta_info.author.pic}}" class="avatar"></image>
                      <text>{{meta_info.author.name}}</text>
                    </view>
                    <view class="item-footer-view">
                      <image src="./icon/view.png" class="view"></image>
                      <text>{{meta_info.read_count}}</text>
                    </view>
                  </view>
                </view>
             </view>
           </navigator>
       </view>
      </block>
      <!-- <view class="loading-container">
        <view class="loading  {{done ? 'hide' : ''}}"></view>
        <text class="{{done ? '' : 'hide'}}">只有这些啦~</text>
      </view> -->
      <import src="../../common/loading.wxml"/>
      <template is="loading" data="{{done, text:'只有这些啦~'}}"/>
    </view>
  </view>
  <!-- <template is="to-top"/> -->
</scroll-view>

二、wxss样式文件代码如下：

/**index.wxss**/
/*
 1. 不认ID
 2. 不认属性选择符
 3. 不认相邻兄弟选择符
*/

/* 搜索部分 */
/*.search-box{
  display: flex;
  height:280rpx;
  box-sizing: border-box;
  background-color: rgba(8,8,8,.84);
  padding:94rpx 56rpx;
  position: relative;
}

.search-input{
  height: 70rpx;
}

.search-btn{
  height: 70rpx;
}

.bg-image{
  background:url(http://a.diaox2.com/cms/sites/default/files/20161013/goodthing/TTCOVER.jpg);
}*/
.container{
  color:#080808;
}

.search-box{
  padding: 38.647rpx 56rpx;
}

.bg-image{
  background:url(http://a.diaox2.com/cms/sites/default/files/20161013/goodthing/TTCOVER.jpg);
}

.tag{
  display: block;
  padding:0 30rpx;
  box-sizing: border-box;
  background-color: #fff;
  line-height: 1;
}

.tag::before{
  display: block;
  content: attr(data-tag);
  padding:24rpx 0;
  font-size: 32rpx;
  border-bottom: 1px #eaeaea solid;
}


.function-list{
  background-color: #fff;
  text-align: center;
  line-height: 1;
}

.function-list navigator{
  padding: 50rpx 0;
  display: inline-block;
  width: 50%;
}

.function{
  display: -webkit-flex;
  display: flex;
  border-right: 1px #d8d8d8 solid;
  -webkit-flex-direction: column;
          flex-direction: column;
   -webkit-align-items: center;
           align-items: center;
}
.no-border{
  border:none;
}

.function image {
  width: 64rpx;
  height: 64rpx;
}

.function text {
  margin-top: 28rpx;
  font-size: 28rpx;
}

.metainfo-area{
  margin-top: 20rpx;
}

.up-list{

  display: -webkit-flex;

  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;

  background-color: #fff;
}

.up-list-item navigator{
  padding: 30rpx 30rpx 0 30rpx;
}

.item-desc-container{
  -webkit-flex: 1;
          flex: 1;
  display: -webkit-flex;
  display: flex;
  border-bottom: 1px #eaeaea solid;
  padding-bottom: 30rpx;
}

.item-img{
  max-width: 160rpx;
  max-height: 160rpx;
  min-width: 160rpx;
  min-height: 160rpx;
}

.info-view{
  -webkit-flex: 1;
          flex: 1;
  margin-left:30rpx;
  font-size: 24rpx;
  color:#999;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  max-width: 500rpx;
}

.title{
  overflow:hidden;
  font-size:28rpx;
  /*line-height: 1;*/
  height: 76rpx;
  color:#080808;
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: start;
  -webkit-line-clamp: 2;
  /*overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;*/
}

.content{

  font-size: 24rpx;
  color:#999;
  line-height: 1.4;

  max-height: 68rpx;
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: start;
  -webkit-line-clamp: 2;
}

.avatar{
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.view{
  width: 36rpx;
  height: 20rpx;
  margin-right: 5rpx;
}

.item-footer{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
          align-items: flex-end;
  -webkit-flex: 1;
          flex: 1;
  font-size: 24rpx;
  color:#999;
}

.item-footer-view{
  -webkit-flex: 1;
          flex: 1;
  text-align: right;
}

三、js页面代码如下：

// import common from '../../common/app'
import API from '../../common/API'
import { handleTitle, fetch } from '../../utils/utils'
const loadingLength = 20
const loadingStart = 0
const page = {
  onLoad(){
    console.log('index onload...')
    this.setData({
      pageLength: loadingLength,
      start: loadingStart
    })
    // fetch(API.giftDefault.url).then(res => console.log(res)).catch(res => console.log(res))
    wx.showToast({title: '玩命加载中',icon: 'loading', duration: 10000})
    const url = API.giftDefault.url
    fetch(url).then(result => {
      console.log(`${url}返回的数据：`,result);
      const {aids, meta_infos} = result.data
      const metas = []
      aids.forEach(id => {
        const meta_info = meta_infos[id]
        if(!meta_info) return console.error(`主动报错：${url}接口返回的数据，aids和meta_infos不是一一对应的关系。id是：${id}`);
        // 因为小程序没有对应的专刊的展示页，所以过滤掉专刊数据
        if(meta_info.ctype == 3) return
        // 克勒kk：我给父亲送过的礼物(2294) 这篇文章是首页
        // 返回的meta没有nid这个字段
        if( !meta_info.nid ){
          meta_info.nid = id
        }
        meta_info.title = handleTitle(meta_info.title)
        meta_info.author.pic = `http://c.diaox2.com/cms/diaodiao/${meta_info.author.pic}`
        if(!/^(http(s)?:)?///i.test(meta_info.thumb_image_url)){
          meta_info.thumb_image_url = 'http://a.diaox2.com/cms/sites/default/files/' + meta_info.thumb_image_url
        }
        metas.push(meta_info)
      })
      this.loadNewPage(metas)
      wx.hideToast()
    }).catch(result => {
      console.log(`${url}接口失败：`,result)
      wx.hideToast()
    })

  }
  ,scrolltolower(){
    this.loadNewPage()
  }
  ,loadNewPage(meta_infos = this.data.all_meta_infos){
    if(!meta_infos || meta_infos.length === 0 ) return;
    let {start, pageLength} = this.data
    // console.log(start);
    // console.log(pageLength);
    const end = start + pageLength
    // 第一次执行该方法时，this.data.meta_infos 为 undefined
    const alreadyDisplay = this.data.meta_infos || []
    const shouldLoad = meta_infos.slice(start, end)
    const metas = alreadyDisplay.concat(shouldLoad)
    console.log("metas.length:",metas.length);
    console.log("meta_infos.length:",meta_infos.length);
    if(metas.length === meta_infos.length){
      setTimeout(() => {
        this.setData({ done: true })
      }, 120)
    } else {
      this.setData({ done: false })
    }
    this.setData({ meta_infos: metas, start: start + pageLength, all_meta_infos: meta_infos })
    // this.meta_infos = meta_infos
    // start += pageLength
  }
  ,confirm(){
    const query = this.data.query
    wx.navigateTo({url:`../gift-result/gift-result?queryParameter=${JSON.stringify({query})}`})
  }
  ,onShareAppMessage: function () {
    return {
      title: '礼物挑选神器',
      desc: '送礼不用愁，帮你找到心动好礼'
    }
  }
}

// Object.assign(page, common)
Page(page)

模板简介：该模板名称为【微信小程序礼物挑选神器攻略列表样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。