欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序单图文列表页面样式模板制作设计(带幻灯片+加载更多

    2018-05-21 09:43 来源/作者:懒人模板 分类:小程序教程  « »
    今天给大家带来微信小程序单大图文列表页面样式模板制作设计下载(带幻灯片),支持顶部3D幻灯片和顶部搜索栏框以及页面点击手动刷新、加载更多功能。制作完毕以后效果图如下:


    一、wxml页面代码如下:
    <!-- index.wxml -->
    <view class="mpage {{!ui.tStart? 'withAnimate': ''}}" style="left:{{ui.offsetLeft}}px;width: {{ui.windowWidth}}px;" bindtouchstart="handlerStart" catchtouchmove="handlerMove"  bindtouchcancel="handlerCancel" bindtouchend="handlerEnd" bindtap="handlerPageTap">
      <scroll-view bindscroll="" scroll-y style="height: 100%;">
        <view class="search">
          <view catchtap="handlerAvatarTap" class="avatar">
            <image src="{{userInfo.avatarUrl}}"></image>
          </view>
          <view class="search-wrapper {{show_search_back?'search-wrapper-blue':''}}">
            <view class="search-button" bindtap="click_search">
              <view class="iconfont icon-sousuo"></view>
              搜索活动
            </view>
          </view>
          <view bindtap='gotoMap' class="avatar_r">
            <image src="/static/images/map7.png"></image>
          </view>
        </view>
        <!-- 活动详情界面 -->
        <swiper duration="300" interval="5000" autoplay="{{autoplay}}" bindchange="onSwiperChange" current="{{ curIndex }}" style="overflow: visible;">
          <swiper-item wx:for="{{ postsShowSwiperList }}" style="overflow: visible;" wx:key="actpic">
            <image src="{{ item.actPic }}" style="width: 100%; height: 300rpx; background: #fff; box-shadow: 0 10rpx 15rpx rgba(0, 0, 0, .1); -webkit-transform: scale({{ curIndex == index ? 0.9 : 0.65 }}) translate({{ (curIndex == index - 1 || curIndex == index + 1) ? (curIndex - index) * 30 : 0 }}%, 0); -webkit-transition: .3s; position: relative;"
              data-actid="{{item.id}}" data-pubid='{{item.publisherId}}' bindtap="click_activity" mode="aspectFill" />
            <view class="horizontal">
              <view class="tag recommend">最热活动</view>
              <text class="title">{{item.title}}</text>
            </view>
          </swiper-item>
        </swiper>
    
        <view class="activities">
          <view class="subtitle">
            <image src="/static/images/ic_activity.png" mode="aspectFit" />
            <text>最新活动</text>
            <space/>
            <button bindtap="refresh">点击刷新</button>
          </view>
    
          <view class="activity" wx:for="{{postsList}}" wx:key="id">
            <view class="list_header">
              <view class="list_header_left">
                <image mode="aspectFill" src="{{item.publisherPic}}" wx:if="publisherPic"></image>
                <view>{{item.publisherName}}</view>
              </view>
              <view class="content-date list_header_right">
                <image src="/static/images/calendar.png"></image>
                <text>{{item.pubtime}}</text>
                <image src="/static/images/comments.png"></image>
                <text class="">{{item.commentnum}}</text>
                <image src="/static/images/home-like.png"></image>
                <text class="">{{item.likenum}}</text>
              </view>
            </view>
            <view class="horizontal">
              <view class="tag tag_{{item.acttype}}">{{item.acttypename}}</view>
              <text class="title">{{ item.title }}</text>
            </view>
            <image mode="aspectFill" class="photo" src="{{item.actPic}}" wx:if="{{item.actPic}}" data-actid="{{item.id}}" data-pubid='{{item.publisherId}}' bindtap="click_activity"></image>
            <text class="intro">{{item.content}}</text>
            <text class="time">有效时间:{{ item.endtime }}</text>
            <text class="location">活动地点:{{ item.address }}</text>
    
          </view>
    
        </view>
        <view class="loadingmore">
          <view wx:if="{{!isEmpty}}">
            <button class="more-button" formType="submit" size="mini" bindtap="loadMore">加载更多...</button>
          </view>
          <view class="no-more" wx:if="{{isEmpty}}">---无更多活动---</view>
        </view>
        <tab-shadow/>
      </scroll-view>
    </view>
    
    <!-- 侧滑栏 -->
    <view bindtouchstart="handlerStart" catchtouchmove="handlerMove" bindtouchcancel="handlerCancel" bindtouchend="handlerEnd" class="user" style="width: {{ui.menuWidth}}px">
      <view style="width: {{ui.menuWidth}}px;left:{{-ui.menuWidth/3 + ui.offsetLeft/3}}px" class="user-box {{!ui.tStart? 'withAnimate': ''}}">
        <view class="user-face-wrapper">
          <image mode="aspectFill" src="/static/images/icon/backGround.png" style="height: 150px" class="loginbg"></image>
          <image class="user-face" src="{{userInfo.avatarUrl}}"></image>
          <view class='user-info'>
            <text>{{userInfo.nickName}}</text>
            <image wx:if="{{userInfo.gender == 1}}" src="/static/images/m3.png"></image>
            <image wx:if="{{userInfo.gender == 2}}" src="/static/images/w3.png"></image>
            <image wx:if="{{userInfo.gender == 0 || userInfo.gender==''}}" src="/static/images/sex.png"></image>
          </view>
        </view>
        <view style='background-color: #fff;' class='bottom-box'>
          <view class="list-box">
            <view class="icon-text">
              <span>步数</span>
            </view>
            <text>2543</text>
          </view>
          <view class="list-box " bindtap=" ">
            <view class="icon-text ">
              <span>排名</span>
            </view>
            <text>21</text>
          </view>
        </view>
        <view class="thirdblock" style='margin-top:80px;'>
          <view class="itemself" bindtap="click_myLaunch" data-index="1">
            <image src="/static/images/icon/times.png" class="itemself_ico"></image>
            <span>我的发起</span>
          </view>
          <view class="itemself" bindtap="click_myJoin" data-index="2">
            <image src="/static/images/icon/jssq.png" class="itemself_ico"></image>
            <span>我的加入</span>
          </view>
          <view class="itemself" bindtap="click_myCollection" data-index="3">
            <image src="/static/images/icon/status.png" class="itemself_ico"></image>
            <span>我的收藏</span>
          </view>
          <view class="itemself" bindtap="click_projectBrief" data-index="4">
            <image src="/static/images/icon/specialty.png" class="itemself_ico"></image>
            <span>项目简介</span>
          </view>
          <view class="itemself" bindtap="click_Tick" data-index="5">
            <image src="/static/images/icon/tick2.png " class="itemself_ico"></image>
            <span>反馈建议</span>
          </view>
           <view class="itemself" bindtap="click_more" data-index="6">
            <image src="/static/images/icon/plus.png " class="itemself_ico"></image>
            <span>更多信息</span>
          </view>
        </view>
        <view class="h10"></view>
        <view class="h10"></view>
    
      </view>
    </view>

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议