1 <view class='container'>
2
3 <scroll-view scroll-y='true' class='page-body' bindscrolltolower="binbottom">
4 <view class='ar_picker_wrap'>
5 <picker value='{{index}}' range='{{caseArray}}' bindchange='changeName'>
6 <view>{{caseArray[index]}}</view>
7 </picker>
8 </view>
9 <!-- list -->
10 <view class='nav_section'>
11 <view wx:if="{{list}}">
12 <block wx:for="{{list}}" wx:key="unique">
13 <!-- 大盒子 -->
14 <view class='nav_section_items'>
15 <!-- 存放图片 -->
16 <view class='nav_section_img'>
17 <image src='{{item.cover}}'></image>
18 </view>
19 <!-- 存放内容 -->
20 <view class='section_con'>
21 <!-- 文本内容 -->
22 <view class='section_con_sub'>
23 <text>{{item.company}}</text>
24 </view>
25 <view class='section_con_price'>
26 <text>{{item.killname}}</text>
27 <text class='price'>{{item.price}}</text>
28 </view>
29 <!-- 描述的内容 -->
30 <view class='message'>
31 <text>{{item.message}}</text>
32 </view>
33
34 </view>
35 </view>
36 </block>
37 </view>
38
39 <view wx:else>
40 <text>暂无数据</text>
41
42 </view>
43
44 </view>
45
46
47 </scroll-view>
48
49 </view> 1 .ar_picker_wrap{
2 width: 670rpx;
3 border-radius: 20rpx;
4 padding: 20rpx;
5 margin: 20rpx auto;
6 border: 1rpx solid #333;
7 font-size: 30rpx;
8
9 }
10 .nav_section{
11 width: 100%;
12
13 }
14 .nav_section_items{
15 display: flex;
16 flex-direction: row;
17 justify-content: space-around;
18 padding: 30rpx;
19 border-bottom: 2rpx solid #333
20 }
21 .nav_section_items:active{
22 background: #ddd;
23 }
24 .nav_section_img{
25 flex: 2;
26 height: 158rpx;
27 }
28 .nav_section_img image{
29 width: 100%;
30 height: 100%;
31 display: block ;
32 }
33 .section_con{
34 flex: 6;
35 height: 158rpx;
36 font-size: 26rpx;
37 padding-left: 60rpx;
38 color: #a9a9a9;
39 }
40 .section_con_sub{
41 font-size: 30rpx;
42 color: #000;
43 margin-bottom: 12rpx;
44 line-height: 60rpx;
45 }
46 .section_con_price{
47 color: #000;
48 font-size:32rpx;
49 }
50 .section_con_price .price{
51 padding-left:18rpx;
52 color: red;
53 }/*这里css的代码是*/
.container{
height: 100%;
/*进行弹性布局*/
display: flex;
/* 纵向排列 */
flex-direction: column;
}
.page-body{
display: flex;
flex-direction: column;
flex: 1;
height: 1300rpx;
}
.page{
width: 100%;
display: flex;
flex-direction: column;
} 1 function getSkilllist(){
2 var skillData=[
3 {
4 company:"贵阳责任有限美发公司",
5 cover:'../../images/img4.jpeg',
6 killname:'小女子',
7 price:"500",
8 message:'一只小可爱,爱而不能,不知道要过多久 ,才能来到'
9
10
11 },
12 {
13 company: "贵阳责任有限美发公司",
14 cover: '../../images/img5.jpeg',
15 price: "500",
16 killname: '小英子',
17 message: '一只小可爱,爱而不能,不知道要过多久 ,才能来到'
18
19
20 }, {
21 company: "贵阳责任有限美发公司",
22 cover: '../../images/img6.jpeg',
23 price: "500",
24 killname: '小飞猫',
25 message: '一只小可爱,爱而不能,不知道要过多久 ,才能来到'
26
27
28 }, {
29 company: "贵阳责任有限美发公司",
30 cover: '../../images/img16.jpg',
31 price: "500",
32 killname: '小原子',
33 message: '一只小可爱,爱而不能,不知道要过多久 ,才能来到'
34
35
36 }
37
38 ]
39 return skillData
40 }
41 moudel.exports={
42 getSkilllist: getSkilllist
43
44 }/*原本的js*/
// pages/techenican/techenican.js
var fileData = require('../../utils/data.js')
Page({
/**
* 页面的初始数据
*/
data: {
skillList:fileData.getSkilllist(),
index: 0,
caseArray: [
'美发',
'美容',
'美睫',
'美甲'
]
},
/**
* 生命周期函数--监听页面加载
*/
changeName:function(e){
console.log(e)
let skillVal =e.detail.value
this.setData({
index:skillVal
})
},
binbottom:function(e){
console.log(e ,"+" + "到底了")
//判断list 长度是否为零
if (this.data.skillList.length===0){
return
}else{
wx.showToast({
title: '加载中',
icon:'loading',
duration:2000
})
//我们重复之前的数据
let that =this
that.data.skillList = that.data.skillList.concat(that.data.skillList);
that.setData({
list: that.data.skillList
})
}
},
onLoad: function(options) {
//打印是否拿到数据
console.log(this.data.skillList)
this.setData({
list: this.data.skillList
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})