微信小程序教程(二)

添加底部选项卡

数据绑定

<view class="nav_top">

<block wx:for="{{[1,2,3,4]}}" >

<view class="nav_top_items" bindtap="oks" data-ms="{{ids[index]}}">

<image src="/image/dh{{item}}.png" mode="aspectFill"></image>

<text>{{name[index]}}</text>

</view>

</block>

</view>

<!--list-->

<view class="nav_section">

<view wx:for="{{phone}}">

<view class="nav_section_items" bindtap="listenerButton" data-phone="{{item._phone}}">

<!--image-->

<view class="section_image" bindtap="navigateDetail" data-aid="1">

<image src="{{item._img}}" mode="aspectFill"></image>

</view>

<!--content-->

<view class="section_cont" bindtap="navigateDetail" data-aid="1">

<view class="section_cont_sub">

<text>{{item._name}}</text>

</view>

<view class="section_cont_price"><lable id="dh">电话:</lable>{{item._phone}}</view>

<view>{{item._synopsis}}</view>

</view>

<!--book-->

<view class="section_book" bindtap="bookTap" data-aid="1">

<text>拨打</text>

</view>

</view>

</view>

添加下拉刷新上拉加载

在相应的页面实现onPullDownRefresh方法 和 onReachBottom即可

其中一个页面的代码

js代码

//index.js

//获取应用实例

var that;

var page = 2;

var page_size = 20;

var sort = "last";

var is_easy = 0;

var lange_id = 0;

var pos_id = 0;

var unlearn = 0;

var app = getApp()

Page({

data: {

motto: 'Hello World',

array: '',

hidden: true,

arrays: '',

index: 0,

actionSheetHidden: true,

actionSheetItems: ['保存电话'],

userInfo: {},

name: ["公交", "快递", "维修", "药房"],

ids: ["29", "28", "30", "31"],

phone: '',

phones: '',

},

//事件处理函数

bindViewTap: function () {

wx.navigateTo({

url: '../logs/logs'

})

},

listenerPickerSelected: function (e) {

//改变index值，通过setData()方法重绘界面

this.setData({

index: e.detail.value

});

that = this;

wx.request({

url: 'http://139.129.229.214:8009/MobileService.asmx/GetPhones',

data: { 'param': '{"pageSize":10,"pageIndex":1,"cid":' + that.data.arrays[that.data.index]._id + '}' },

method: "POST",

header: { 'Content-Type': 'application/x-www-form-urlencoded' },

success: function (res) {

that.setData({

phone: res.data.Result

});

}

})

},

listenerButton: function (e) {

console.log(e)

wx.setStorageSync('phones', e.currentTarget.dataset.phone)

this.setData({

//取反

actionSheetHidden: !this.data.actionSheetHidden,

});

},

listenerActionSheetclose: function () {

this.setData({

//取反

actionSheetHidden: !this.data.actionSheetHidden,

});

},

oks: function (e) {

console.log(e)

console.log(e.currentTarget.dataset.ms)

wx.navigateTo({

url: '../phone/phone?id=1'

})

wx.setStorageSync('pid', e.currentTarget.dataset.ms)

},

listenerActionSheet: function () {

this.setData({

actionSheetHidden: !this.data.actionSheetHidden

})

var value = wx.getStorageSync('phones')

wx.makePhoneCall({

phoneNumber: value,

success: function () {

console.log("成功拨打电话")

}

})

},

onPullDownRefresh: function (event) {

// 该方法绑定了页面滑动到顶部的事件，然后做上拉刷新

wx.showNavigationBarLoading() //在标题栏中显示加载

page = 1;

this.setData({

phone: [],

scrollTop: 0

});

GetList(this,0)

},

onReachBottom: function () {

wx.showNavigationBarLoading() //在标题栏中显示加载

// 该方法绑定了页面滑动到底部的事件

var that = this;

GetList(that, 1)

},

scroll: function (event) {

// 该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。

this.setData({

scrollTop: event.detail.scrollTop

});

},

onLoad: function () {

that = this

wx.getSystemInfo({

success: function (res) {

console.info(res.windowHeight);

that.setData({

scrollHeight: res.windowHeight

});

}

});

wx.request({

url: 'http://****/MobileService.asmx/GetPhoneCategory',

data: {},

method: "POST",

header: { 'Content-Type': 'application/x-www-form-urlencoded' },

success: function (res) {

var a = [];

for (var i = 0; i < res.data.Result.length; i++) {

a.push(res.data.Result[i]._name)

}

that.setData({

array: a,

arrays: res.data.Result

});

}

})

wx.request({

url: 'http://****/MobileService.asmx/GetPhones',

data: { 'param': '{"pageSize":10,"pageIndex":1,"cid":0}' },

method: "POST",

header: { 'Content-Type': 'application/x-www-form-urlencoded' },

success: function (res) {

if (res.data.Result.length == 0) {

wx.showToast({

title: '没有数据了',

duration: 2000

})

}

that.setData({

phone: res.data.Result

});

}

})

var that = this

//调用应用实例的方法获取全局数据

app.getUserInfo(function (userInfo) {

//更新数据

that.setData({

userInfo: userInfo

})

})

}

})

// 获取数据的方法，具体怎么获取列表数据大家自行发挥

var GetList = function (that, a) {

if (a == 1) {

} else if (a == 0) {

page = 1;

}

that.setData({

hidden: false

});

wx.request({

url: 'http://****/MobileService.asmx/GetPhones',

data: { 'param': '{"pageSize":10,"pageIndex":' + page + ',"cid":0}' },

method: "POST",

header: { 'Content-Type': 'application/x-www-form-urlencoded' },

success: function (res) {

//that.data.list.concat(res.data.result.list)

if (res.data.Result.length == 0) {

wx.showToast({

title: '没有数据了',

duration: 2000

})

that.setData({

hidden: true

});

} else {

that.setData({

phone: that.data.phone.concat(res.data.Result),//上拉加载旧数据新数据

hidden: true

});

page++;

}

},

complete: function () {

// complete

wx.hideNavigationBarLoading() //完成停止加载

wx.stopPullDownRefresh() //停止下拉刷新

}

})

}

wxml页面

<!--index.wxml-->

<!--<loading hidden="{{!loading}}">

{{title}}

</loading>-->

<view class="container">

<scroll-view scroll-y="true" class="page-body" bindscrolltolower="loadMore">

<view class="container_select">

<view>选择电话类别</view>

<picker mode="selector" range="{{array}}" value="{{index}}" bindchange="listenerPickerSelected">

<text>{{arrays[index]._name}}</text>

</picker>

</view>

<view class="nav_top">

<block wx:for="{{[1,2,3,4]}}" >

<view class="nav_top_items" bindtap="oks" data-ms="{{ids[index]}}">

<image src="/image/dh{{item}}.png" mode="aspectFill"></image>

<text>{{name[index]}}</text>

</view>

</block>

</view>

<!--list-->

<view class="nav_section">

<view wx:for="{{phone}}">

<view class="nav_section_items" bindtap="listenerButton" data-phone="{{item._phone}}">

<!--image-->

<view class="section_image" bindtap="navigateDetail" data-aid="1">

<image src="{{item._img}}" mode="aspectFill"></image>

</view>

<!--content-->

<view class="section_cont" bindtap="navigateDetail" data-aid="1">

<view class="section_cont_sub">

<text>{{item._name}}</text>

</view>

<view class="section_cont_price"><lable id="dh">电话:</lable>{{item._phone}}</view>

<view>{{item._synopsis}}</view>

</view>

<!--book-->

<view class="section_book" bindtap="bookTap" data-aid="1">

<text>拨打</text>

</view>

</view>

</view>

</view>

</scroll-view>

<action-sheet hidden="{{actionSheetHidden}}" >

<block wx:for-items="{{actionSheetItems}}" >

<action-sheet-item data-pid="{{index}}" bindtap="listenerActionSheet">{{item}}</action-sheet-item>

</block>

<!--自动隐藏action-sheet-->

<action-sheet-cancel bindtap="listenerActionSheetclose">取消</action-sheet-cancel>

</action-sheet>

<view class="body-view">

<loading hidden="{{hidden}}" bindchange="loadingChange">

加载中...

</loading>

</view>

</view>

wxss页面

/* pages/gyq/gyq.wxss */

/**index.wxss**/

/* 导航条 */

.nav_top{

display:flex;

flex-direction: row;

justify-content: space-around;

width:100%;

box-sizing: border-box;

padding:20rpx 10rpx;

background:url(../../images/black_line.png) repeat;

color:#fff;

}

.nav_top_items{

text-align: center;

font-size:28rpx;

width:100rpx;

border-radius:8rpx;

box-sizing:border-box;

}

.nav_top_items image{

width:130rpx;

height:130rpx;

display: inline-block;

}

.nav_top .active{

color:#38b337;

}

.active_red{

color:#e5004f;

}

.active_orange{

color:#eb6100;

}

.active_yellow{

color:#fff100;

}

.active_green{

color:#8fc31f;

}

.active_purple{

color:#aa2adf;

}

/* 导航对应内容项 */

.nav_section{

width:100%;

}

.nav_section_items{

display:flex;

flex-direction: row;

justify-content: space-between;

padding:30rpx;

border-bottom:2rpx solid #ddd;

position: relative;

}

.nav_section_items:active{

background:#ddd;

}

.nav_section_items .section_image{

width:170rpx;

height:158rpx;

}

.nav_section_items .section_image image{

width:100%;

height:100%;

}

.nav_section_items .section_cont{

width:400rpx;

font-size:26rpx;

color:#a9a9a9;

}

.nav_section_items .section_cont view{

overflow:hidden;

text-overflow: ellipsis;

white-space:nowrap;

display: block;

}

.nav_section_items .section_cont .section_cont_intro{

white-space:normal;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

}

.nav_section_items .section_cont .section_cont_sub{

font-size: 30rpx;

line-height:60rpx;

color:#000;

margin-bottom:10rpx;

}

.nav_section_items .section_cont .section_cont_price{

font-size:32rpx;

color:#42c7c6;

}

.nav_section_items .section_book{

width:80rpx;

height:80rpx;

font-size:26rpx;

border-radius:100%;

background:#42c7c6;

line-height: 80rpx;

color:#fff;

text-align: center;

margin-top:35rpx;

}

.container_select{

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

justify-content: space-between;

box-sizing: border-box;

}