小菜鸟的温暖小窝
0%

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

发表于 更新于
本文字数： 4.7k 阅读时长 ≈ 4 分钟

具体部分

wxml部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--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部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/* 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部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
// 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 () {

  }
})