zoukankan      html  css  js  c++  java
  • 微信小程序 项目实战(三)list 列表页 及 item 详情页

    1.项目结构

    2.list 列表页

    (1)数据(逻辑)

    list.js

    // pages/list/list.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        title: '加载中...', // 状态
        list: [], // 数据列表
        type: '', // 数据类型
        loading: true // 显示等待框
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) { // options 为 board页传来的参数
        const _this = this;
        // 拼接请求url
        const url = 'https://api.douban.com/v2/movie/' + options.type;
        // 请求数据
        wx.request({
          url: url,
          data: {},
          header: {
            'content-type': 'json' // 默认值
          },
          success: function(res) {
            console.log(res.data);
            // 赋值
            _this.setData({
              title: res.data.title,
              list: res.data.subjects,
              type: options.type,
              loading: false // 关闭等待框
            })
          }
        })
      }
    })

    (2)页面布局

    list.wxml

    <!--pages/list/list.wxml-->
    <!--列表页-->
    <view class='container'>
      <!--等待框-->
      <loading hidden="{{!loading}}">加载中...</loading>
      <!--顶部标题栏-->
      <view class='page-header'>
        <text class='page-title'>{{title}}</text>
      </view>
      <!--列表-->
      <view class='page-body' wx:for="{{list}}" wx:key="id">
        <!--类型判断,显示不同的数据-->
        <block wx:if="{{type === 'us_box'}}">
          <navigator url='../item/item?id={{item.subject.id}}'>
            <view class='item'>
              <image class='poster' src='{{item.subject.images.small}}'></image>
              <view class='meta'>
                <text class='title'>{{item.subject.title}}</text>
                <text class='sub-title'>{{item.subject.original_title}}({{item.subject.year}})</text>
                <view class='artists'>
                  <text>导演:</text>
                  <text wx:for="{{item.subject.directors}}" wx:key="id">{{item.name}}</text>
                </view>
                <view class='rating'>
                  <text>{{item.subject.rating.average}}</text>
                </view>
              </view>
            </view>
          </navigator>
        </block>
        <!--另一种情况-->
        <block wx:else>
          <navigator url='../item/item?id={{ item.id }}'>
            <view class='item'>
              <image class='poster' src='{{item.images.small}}'></image>
              <view class='meta'>
                <text class='title'>{{item.title}}</text>
                <text class='sub-title'>{{item.original_title}}({{item.year}})</text>
                <view class='artists'>
                 <text>导演:</text>
                 <text wx:for="{{item.directors}}" wx:key="id">{{item.name}}</text>
                </view>
                <view class='rating'>
                  <text>{{item.rating.average}}</text>
                </view>
              </view>
            </view>
          </navigator>
        </block>
      </view>
    </view>

    (3)样式

    list.wxss

    /* pages/list/list.wxss */
    .page-header {
      display: flex;
      justify-content: center;
      border-bottom: 1rpx solid #ccc;
    }
    .page-title {
      padding: 20rpx 40rpx;
      color: #999;
      font-size: 38rpx;
      text-align: center;
    }
    .page-body {
      display: flex;
      flex: 1;
      flex-direction: column;
    }
    .item {
      display: flex;
      padding: 20rpx 40rpx;
      border-bottom: 1rpx solid #eee;
      cursor: pointer;
    }
    .item .poster {
       128rpx;
      height: 128rpx;
      margin-right: 20rpx;
    }
    .item .meta {
      flex: 1;
    }
    .item .meta .title,.item .meta .sub-title {
      display: block;
      margin-bottom: 15rpx;
    }
    .item .meta .title {
      font-size: 32rpx;
    }
    .item .meta .sub-title {
      font-size: 22rpx;
      color: #c0c0c0;
    }
    .item .meta .artists {
      font-size: 26rpx;
      color: #999;
    }
    .item .rating {
      font-size: 28rpx;
      font-weight: bold;
      color: #f74c31;
    }
    .tips {
      font-size: 28rpx;
      text-align: center;
      padding: 50rpx;
      color: #ccc;
    }
    .tips image {
       40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
    .tips image,.tips text {
      vertical-align: middle;
    }

    (4)效果图

    3.item 详情页

    (1)数据(逻辑)

    item.js

    // pages/item/item.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        title: '',
        loading: true,
        movie: {}
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        const _this = this;
        // 拼接请求url
        const url = 'https://api.douban.com/v2/movie/subject/' + options.id;
        // 请求数据
        wx.request({
          url: url,
          data: {},
          header: {
            'content-type': 'json' // 默认值
          },
          success:function(res) {
            // 赋值
            _this.setData({
              movie: res.data,
              loading: false // 隐藏等待框
            })
          }
        })
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        // 修改导航栏标题
        wx.setNavigationBarTitle({
          title: this.data.title + '<<电影<<豆瓣'
        })
      }
    })

    (2)页面布局

    item.wxml

    <!--pages/item/item.wxml-->
    <!--详情页-->
    <!--等待框-->
    <loading hidden="{{!loading}}">加载中...</loading>
    <!--滚动列表-->
    <scroll-view scroll-y="true" wx:if="{{movie.title}}">
      <view class='meta'>
        <image class='poster' src='{{movie.images.large}}' background-size="cover"></image>
        <text class='title'>{{movie.title}}({{movie.year}})</text>
        <text class='info'>评分:{{movie.rating.average}}</text>
        <text class='info'>导演:<block wx:for="{{movie.directors}}" wx:key="id">{{item.name}}</block></text>
        <text class='info'>主演:<block wx:for="{{movie.casts}}" wx:key="id">{{item.name}}</block></text>
      </view>
      <view class='summary'>
        <text class='label'>摘要:</text>
        <text class='content'>{{movie.summary}}</text>
      </view>
    </scroll-view>

    (3)样式

    item.wxss

    /* pages/item/item.wxss */
    .meta {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 1000rpx;
      padding: 50rpx 40rpx;
    }
    .poster {
       80%;
      height: 80%;
      margin: 20rpx;
    }
    .title {
      font-size: 42rpx;
      color: #444;
    }
    .info {
      font-size: 18rpx;
      color: #888;
      margin-top: 20rpx;
       80%;
    }
    .summary {
       80%;
      margin: 30rpx auto;
    }
    .label {
      display: block;
    }
    .content {
      color: #666;
      font-size: 20rpx;
      padding: 10rpx;
    }

    (4)效果图

  • 相关阅读:
    java接口工厂模式理解
    ViewDragHelper的点击事件处理
    ViewDragHelper的使用
    路径跟踪 PathMeasure的简单使用
    view事件分发源码理解
    layoutInflater参数解析与源码分析
    安卓menu的介绍与使用
    安卓广播api介绍,给自己理清楚概念
    动态删除集合遇到的一些问题理解
    【翻译】借助 NeoCPU 在 CPU 上进行 CNN 模型推理优化
  • 原文地址:https://www.cnblogs.com/crazycode2/p/8274645.html
Copyright © 2011-2022 走看看