首页 > 小程序教程 > 微信小程序美容美甲技师预约列表设计制作开发教程

微信小程序美容美甲技师预约列表设计制作开发教程

上一篇 下一篇
本文给大家带来的是微信小程序美容美甲技师预约列表设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--technician.wxml-->

<view class="container">
<scroll-view  scroll-y="true"  class="page-body" bindscrolltolower="loadMore">
  <!--category picker-->
  <view class="ar_picker" style="background:#fff">
    <view class="ar_picker_wrap">
        <picker bindchange="bindCasPickerChange" value="{{casIndex}}" range="{{casArray}}">
            <view>
                <text>{{casArray[casIndex]}}</text>
            </view>
        </picker>
    </view>
  </view>
  <!--address picker-->
  <view class="ar_picker">
     <view class="ar_picker_wrap">
        <picker bindchange="bindAddrPickerChange" value="{{addrIndex}}" range="{{addrArray}}">
            <view>
                <text>{{addrArray[addrIndex]}}</text>
            </view>
        </picker>
     </view>
  </view>
  <!--list-->
  <view class="nav_section">
    <view wx:if="{{list}}">
        <block wx:for="{{list}}" wx:key="item.id">
            <view class="nav_section_items" bindtap="navigateDetail" data-aid="{{item.id}}">
                <!--image-->
                <view class="section_image" >
                <block wx:if="{{item.avatar}}">
                    <image src="{{item.avatar}}" mode="aspectFill"></image>
                </block>
                <block wx:else>
                    <image src="../../images/default_pic.png" mode="aspectFill"></image>
                </block>
                </view>
                <!--content-->
                <view class="section_cont" >
                    <view class="section_cont_sub">
                        <text>{{item.company}}</text>
                    </view>
                    <view class="section_cont_price" style="color:#000">{{item.nickname}}<text class="section_cont_price">  {{item.price}}</text></view>
                    <view>{{item.message}}</view>
                </view>
                <!--book-->
                <view class="section_book" >
                        <view>{{item.distance}}</view>
                </view>
            </view>
            
        </block>
    </view>
    
    <view wx:else>暂无数据</view>
          
</view>

</scroll-view>
</view>
 
二、wxss样式文件代码如下:
/**index.wxss**/
.container{
    padding:0;
    margin:0;
}
.ar_picker{
    width:100%;
    font-size:30rpx;
    color:#000;
    background: #efeff4;
    margin:0;
    padding:10rpx 0rpx;
}

.ar_picker .ar_picker_wrap{
    width: 670rpx;
    background: #fff url(../../images/arrow.png) no-repeat right center;
    background-size:25rpx 14rpx;
    background-position:650rpx;
    border-radius:20rpx;
    padding:10rpx 30rpx;
    margin:10rpx auto;
    border:1px solid #ddd;
}
/* 导航条 */
.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:83rpx;
    height:93rpx;
    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:380rpx;
    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:#d24a58;
}
.nav_section_items .section_book{
    height:80rpx;
    font-size:26rpx;
    background:url(../../images/location.png) no-repeat left;
    background-size:17rpx 28rpx;
    line-height: 80rpx;
    color:#d24a58;
    text-align: left;
    margin-top:35rpx;
    padding-left:30rpx;
}
三、js页面代码如下:
/*technician.js*/

//获取应用实例
var app = getApp()
var fileData = require('../../utils/data.js')
var util = require('../../utils/util')

Page({
  // 页面初始数据
  data: {
      // nav 初始化
      // cas picker
      casArray: ['美发','美容','美甲','美睫'],
      casIndex:0,
      // addr picker
      addrArray: util.replacePhone(fileData.userData().addrs,false),
      addrIndex:0,
      skillData: fileData.getSkilledData(),
      curNavId: 1,
		  curIndex: 0
  },
   
  onLoad:function(){
    var that = this
    that.setData({
      list: that.data.skillData
    })
  },
  // 跳转至详情页
  navigateDetail: function(e){
    wx.navigateTo({
      url:'../technicain_detail/technicain_detail?artype=' + e.currentTarget.dataset.arid
    })
  },
  // 加载更多
  loadMore: function (e) {
    console.log('加载更多')
    if (this.data.skillData.length === 0) return
    var that = this
    // 由于是模拟数据,加载更多时候,数据重复加载
    that.data.skillData= that.data.skillData.concat(that.data.skillData)
    that.setData({
      list: that.data.skillData,
    }) 
  },
  // 类别选择
  bindCasPickerChange:function(e){
    console.log('Category picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      casIndex: e.detail.value
    })
  },
  // 地址选择
  bindAddrPickerChange:function(e){
    console.log('Category picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      addrIndex: e.detail.value
    })
  }

  
})

模板简介:该模板名称为【微信小程序美容美甲技师预约列表设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 17,025次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 07-10
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
html5 微信图片 微信公众平台 微信文章 微信素材 企业网站 微信模板 自适应 单页式简历模板 表格式简历模板
您可能会喜欢的其他模板