第一个微信小程序应用示例

具体部分

wxml部分

<!--miniprogram/pages/index/index.wxml-->
<view class="movie" wx:for="{{moveList}}" wx:key="item" >
  <image src='{{item.ImgSrc}}' class="movie-img"></image>
 <view class="movie-info" >
    <text class="movie-title">{{item.CN_Title}}</text> <text style="color:'#00A65F'"> Top{{item.uid}}</text>
    <view>
     <text wx:if="{{item.EN_Title !== ' '}}">别名：{{item.EN_Title}}</text>
     <text wx:if="{{item.EN_Title == ' '}}">别名：暂无</text>
    </view>
    <view>观众评分：
      <text class="movie-score"> {{item.Rating}}分</text>
    </view>
    <view>评分人数：
      <text >{{item.Judge}} <text >人评价</text> </text>
    </view>
    <view wx:if="{{item.Inq !== ' '}}">点评: “{{item.Inq}}”</view>
    <view wx:if="{{item.Inq == ' '}}">点评: 暂无</view>
    <view >详情链接:<text style="color:blue" data-text="{{item.Link}}" bindtap="textPaste">点击复制</text> </view>
  </view>
</view >
<text class="has-no-more" wx:if="{{end}}" style="text-align:center;font-size:20rpx;">---没有更多了---</text>
<view class="btn" bindtap="gotop" wx:if="{{ToTop}}">
  <text class="btn-gotop" style="">顶部</text>
</view>

wxss部分

/* miniprogram/pages/index/index.wxss */
.movie{
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.movie-img{
  width: 200rpx;
  height: 300rpx;
  margin-right: 20rpx;
}

.movie-info{
  flex: 1;
    font-size: 28rpx;
    line-height: 1.8;
}

.movie-title{
  color: #666;
  font-size: 40rpx;
  font-weight: bolder;
}

.movie-score{
  color: #faaf00;
}

.movie-comment{
  height: 60rpx;
  background: #E54847;
  color: #fff;
  font-size: 26rpx;
  margin-top: 120rpx;
}

.btn{
  background-color: #808080;
  border: black;
  margin-left:85%;
  width:48px; 
  height: 48px;
  position:fixed; 
  bottom:40px; 
  border-radius: 50%;
  opacity:0.5;
  }
  .btn-gotop 
  { 
  color:white; 
  position:absolute;
  margin-top: 0.8rem;
  margin-left: 0.4rem
  } 

js部分

// miniprogram/pages/index/index.js
const db = wx.cloud.database()
Page({
 
  /**
   * 页面的初始数据
   */
  data: {    
      moveList:[],
      start:0,
      cout:20,
      ToTop:false,
      end:false,
      s:''
  },
  textPaste:function(e){//点击复制
    wx.setClipboardData({
      data: e.currentTarget.dataset.text,
      success:function(res){
         wx.showToast({
            title: '复制成功',
         })
        /*wx.getClipboardData({//获取复制内容
          success: function(res){
            console.log(res.data)
          }
        })*/
      }
    })
 },
  onPageScroll:function(e){ // 获取滚动条当前位置
    if(e.scrollTop>400){
      this.setData({
         ToTop:true
      });
    }
    else{
      this.setData({
        ToTop:false
     });
    }
},
  gotop:function(e){//返回顶部
    if (wx.pageScrollTo) {  
      wx.pageScrollTo({
        scrollTop: 0
      });    
    } else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      })
    }

  },
  K:function () {
    wx.showLoading({
      title: '加载中',
    })
    var start = this.data.start;
    var cout =this.data.cout;
    db.collection('douban').skip(start).limit(cout).get().then(res=>{
      this.setData({
        moveList:this.data.moveList.concat(res.data),
        start:start+cout
      });
      wx.hideLoading();
    }).catch(err=>{
        console.log(err);
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

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

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

  },

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

  },

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

  },

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

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.K();
    if(this.data.start>=240){
        this.setData({
            end:true
        });
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})