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() {

  }
})