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