|
一：点击空白处隐藏input，点击评论出现
wxml:
-
<scroll-view style="height: {{windowHeight}}px; width: {{windowWidth}}px;" scroll-y="true" bindscrolltoupper="pullDownRefresh" bindscrolltolower="pullUpLoad" bindtap="click_blank">
-
<view wx:if="{{comment}}" class="comment-input"><input type="text" name="content" auto-focus placeholder-style="margin-top:-8rpx;" placeholder="{{comment_placeholder}}" bindchange="comment_input" /><button>发送</button></view>
js:
-
// 评论（点击空白处隐藏input，点击评论出现）
-
click_blank:function(e){
-
var flag = "";
-
var comment_placeholder ="";
-
if(e.target.dataset.comment==1){
-
flag = true;
-
comment_placeholder = e.target.dataset.username;
-
}else{
-
flag = false;
-
comment_placeholder = "";
-
}
-
this.setData({
-
comment:flag,
-
comment_placeholder:"评论"+comment_placeholder+"动态"
-
})
-
},
二：下拉刷新
wxml:
-
<view wx:if="{{items}}">
-
<scroll-view scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" style="height: {{windowHeight}}px">
-
<view wx:for="{{items}}">
-
<view class="item">
-
<view class="item-top">
-
<view class="avatar" wx:if="{{item.avatar}}">
-
<image mode="aspectFill" src="{{'http://uerb.net/'+item.avatar}}"></image>
-
</view>
-
<view class="avatar" wx:else><image mode="aspectFill" src="../img/default_img.png"></image></view>
-
<view class="item-username">
-
<text>{{item.username}}{{item.jobname}}</text>
-
</view>
-
<view class="item-time">{{item.adddate}}</view>
-
</view>
-
</view>
-
</view>
-
<view wx:if="{{hasMore}}">
-
<view wx:if="{{nomore}}" class="tips">
-
<text>没有更多内容了</text>
-
</view>
-
<view wx:else class="tips">
-
<image src="../img/loading.gif" mode="aspectFill"/>
-
<text>玩了命的加载中...</text>
-
</view>
-
</view>
-
</scroll-view>
-
<loading hidden="{{loading}}">加载中...</loading>
js:
-
Page({
-
<span style="white-space: pre;">data: {
-
windowHeight:"",//屏幕高
-
page:1,
-
totalPage:"",//总页数
-
nomore:false,//加载完所有信息显示
-
hasMore:true//加载时显示
-
},
-
// 加载
-
onLoad: function (e) {
-
console.log(this.data.page);
-
this.getDataFromServer(this.data.page);
-
},
-
// 读取屏幕高度，赋值给scroll-view
-
onShow: function( e ) {
-
wx.getSystemInfo( {
-
success: ( res ) => {
-
this.setData( {
-
windowHeight: res.windowHeight
-
})
-
}
-
})
-
},
-
// 上拉加载更多
-
lower: function( e ) {
-
var page = this.data.page+1;
-
var nomore = this.data.nomore;
-
if(page > this.data.totalPage){
-
page = this.data.totalPage;
-
nomore =true;
-
}
-
this.setData( {
-
page: page,
-
nomore:nomore
-
})
-
this.getDataFromServer( page );
-
console.log( "上拉加载更多...." + page);
-
},
-
// 下拉返回
-
upper: function( e ) {
-
var page = this.data.page-1;
-
-
if(page < 1){
-
page = 1;
-
}
-
this.setData( {
-
page: page
-
})
-
this.getDataFromServer( page );
-
console.log( "下拉返回上页...." + page)
-
},
-
//获取网络数据的方法
-
getDataFromServer: function (page) {
-
console.log(page,this.data.totalPage);
-
if(this.data.totalPage &&page > this.data.totalPage){
-
page = this.data.totalPage;
-
}
-
var that = this;
-
that.setData({
-
loading: false,
-
hasMore: true
-
}),
-
wx.request({
-
url: 'url?p/'+page,
-
data: {
-
size: 10,
-
parentsid: wx.getStorageSync('parentsid'),
-
nurseryid: wx.getStorageSync('nurseryid'),
-
classid: wx.getStorageSync('classid'),
-
childid: wx.getStorageSync('childid')
-
},
-
header: {
-
'Content-Type': 'application/json'
-
},
-
success:function(res) {
-
if(res.statusCode = 200){
-
var items = res.data.dynamiclist;
-
that.setData({
-
items: items,
-
totalPage: res.data.totalPage,
-
loading: true,
-
hasMore: false
-
});
-
}else{
-
console.log("服务器异常");
-
}
-
}
-
})
-
}
-
})</span>
wxss:
-
/*提示*/
-
.tips {
-
font-size: 28rpx;
-
text-align: center;
-
padding: 50rpx;
-
color: #ccc;
-
}
-
.tips image {
-
width: 40rpx;
-
height: 40rpx;
-
margin-right: 20rpx;
-
}
-
-
-
.tips image,
-
.tips text {
-
vertical-align: middle;
-
}
三：全局变量
微信小程序里面有个app.js，我们可以在这个里面设置全局变量，像酱
-
App({
-
data:{
-
servsers:"http://192.168.0.253:3000"
-
}
-
})
在外面就这样引用就可以了，这个真的是简单
四：更改navbar上面的文字
-
wx.setNavigationBarTitle({
-
title: '我是通过API设置的NavigationBarTitle'
-
})
就酱便可以改变标题栏的文字了 |
