小程序组件开发之首页模块代码重构

// index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    // 视频1
    wx.request({
      data:{
        key:"5d2991ac5e635ff313322cbdfa6d7d5f",
        type:"hot_video",
        size:10
      },
      url: 'http://apis.juhe.cn/fapig/douyin/billboard?key='+this.key+'&type='+this.type+'&size='+this.size,
      success:function (res) {
        var datainfo = res.data.result;
        // console.log(res)
        console.log(datainfo);
        that.setData({
          datainfo:datainfo
        })
      }
    })
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})
<!--index.wxml-->

<navigation-bar extclass="{{true}}"></navigation-bar>

<line title="电影" items="{{datainfo}}" moreurl="/pages/list/list?type=movie" type="movie"></line>

<line title="娱乐" items="{{datainfo}}" moreurl="/pages/list/list?type=movie" type="movie"></line>

<line title="电视剧" items="{{datainfo}}" moreurl="/pages/list/list?type=movie" type="movie"></line>
index.json

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar",
    "line":"/components/line/line"
  }
}
index.wxss

/**index.wxss**/
/*电影 更多*/
.dy-line {
  width: 100%;
  height: 70rpx;
  margin-top: 30rpx;
}
.dy-line-1 {
  display: flex;
}
.dy-title{
  flex: 1;
  padding-left: 10px;
  padding-right: 20px;
  box-sizing: border-box;
}
.gd-title {
  padding-right: 10px;
}

/*滚动图片*/
.gdtp {
  margin-top: 30rpx;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
}
.gdtp-tp image {
  width: 240rpx;
  height: 310rpx;
}
.gdtp-tp {
  display: inline-block;
  margin-right: 10rpx;
  height: 400rpx;
  width: 240rpx;
}
.gdtp-xx image {
  width: 40rpx;
  height: 40rpx;
}

/* 行1 */
.dy-line1{
  margin-top: 500rpx;
}

/* 行2 */
.dy-line2{
  margin-top: 100rpx;
}

以下是: 首页模块代码重构,并组件化应用。

<!--components/line.wxml-->

<view class="dy-line">
  <view class="dy-line-1">
    <view class="dy-title">{{title}}</view>
    <navigator class="gd-title" url="">更多</navigator>
  </view>

  <scroll-view class="gdtp" scroll-x="{{true}}">

    <view wx:for="{{items}}" wx:key="{{item.title}}" item="{{item}}" itemurl="/pages/detail/detail?type={{type}}&id={{item.id}}" class="gdtp-tp">
      <image src="https://image11.m1905.cn/uploadfile/2017/0510/thumb_1_300_406_20170510101856524637.jpg" mode="" />
      <view class="gdtp-mc">{{item.author}}</view>
      <view class="gdtp-xx">
        <image wx:for="{{[1,2,3]}}" src="/images/rate_light.png" mode="" />
        <image src="/images/rate_half.png" mode="" />
        <image src="/images/rate_gray.png" mode="" />
      </view>
    </view>

  </scroll-view>

</view>

// components/line.js

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type: String,
      value: ""
    },
    moreurl: {
      type: String,
      value: ""
    },
    items: {
      type: Array,
      value: []
    },
    type: {
      type: String,
      value: ""
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})
/* components/line.wxss */

/*电影 更多*/
.dy-line {
  width: 100%;
  height: 70rpx;
  margin-top: 30rpx;
  margin-bottom: 500rpx;
}
.dy-line-1 {
  display: flex;
}
.dy-title{
  flex: 1;
  padding-left: 10px;
  padding-right: 20px;
  box-sizing: border-box;
}
.gd-title {
  padding-right: 10px;
}

/*滚动图片*/
.gdtp {
  margin-top: 30rpx;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  white-space: nowrap;
}
.gdtp-tp image {
  width: 240rpx;
  height: 310rpx;
}
.gdtp-tp {
  display: inline-block;
  margin-right: 10rpx;
  height: 400rpx;
  width: 240rpx;
}
.gdtp-xx image {
  width: 40rpx;
  height: 40rpx;
}

/* 行1 */
.dy-line1{
  margin-top: 500rpx;
}

/* 行2 */
.dy-line2{
  margin-top: 100rpx;
}

line.json

{
  "component": true,
  "usingComponents": {}
}

发表评论

邮箱地址不会被公开。