微信小程序台球助教我的页面（台球厅选择助教小程序）

前言

我们在日常生活中，男生最喜欢的一项运动，莫过于台球了。台球打的开心不取决于助教，那种陪伴我懂。但是大家去线下发现浪费了很多时间，还容易被骗。为此开发了一款线上可以选择助教以及附近台球厅的小程序。

页面展示

一、页面的设置

axml

<view class='container'>
	<!-- 第1部分 -->
	<view class='top-container'>
		<image class='bg-img' src='https://img-baofun.zhhainiao.com/fs/8c4b1a97cbefd2c44300f3d59fcdfca2.jpg'></image>
	</view>
	<!-- 第2部分 -->
	<view class='middle-container'>
		<view class="view_2">
			<view class="view_tupianwenzi">
				<image class="image_tupian" src="/pages/images/tushu.png"></image>
				<text class="text_1">台球助教</text>
			</view>
			<view class="view_tupianwenzi" bindtap="webViewAll" id="2">
				<image class="image_tupian" src="https://img1.baidu.com/it/u=303559008,442691635&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501"></image>
				<text class="text_1">钱包</text>
			</view>

			<view class="view_tupianwenzi" bindtap="jianjie" bindtap="webViewAll" id="3">
				<image class="image_tupian" src="https://hbimg.huabanimg.com/68d5636083d1c02e549cdc55ee67a71cfc3f9aed2e48-NTa1fi_fw658"></image>
				<text class="text_1">优惠卷</text>
			</view>
			<view class="view_tupianwenzi" bindtap="webViewAll" id="6">
				<image class="image_tupian" src="https://bpic.51yuansu.com/pic3/cover/01/16/80/5904aa2bdc5e2_610.jpg"></image>
				<text class="text_1">更多</text>
			</view>
		</view>

	</view>

	<!-- 第3部分 -->
	<view class='container_3'>
		<view class='middle-item' hover-stay-time="150">
			<image class="image_1" src="https://tse3-mm.cn.bing.net/th/id/OIP-C.fEf9lRJ9pAgJIxIBJxQoBgHaHa?rs=1&pid=ImgDetMain"></image>
			<text class='text_2'>申请助教</text>
			<image class="image-jiantou" src="/pages/images/jinru.png"></image>
		</view>
	</view>

	<!-- 第4部分 -->
	<view class='container_4'>
		<view class='middle-item' hover-stay-time="150">
			<image class="image_tupian_1" src="https://gd-hbimg.huaban.com/886b7edfa14341d1f87fc2cc525e4055007130717bd3-5YLdFL_fw658"></image>
			<text class='text_2'>邀请好友</text>
			<image class="image-jiantou" src="/pages/images/jinru.png"></image>
		</view>

		<view class="view_line"></view>

		<view class='middle-item' hover-class="opcity" hover-stay-time="150">
			<image class="image_tupian_1" src="https://ts1.cn.mm.bing.net/th/id/R-C.e80c34922fbe07e300153e0dbe6316ab?rik=7Sq9Z1dTEiojbA&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2020%2f06-13%2f85293%2fwater_85293_698_698_.png&ehk=7zpQyZBtybSgn2KgMvsLBhOQ2U4r%2fKVKMuycPDzryew%3d&risl=&pid=ImgRaw&r=0"></image>
			<text class='text_2'>加入我们</text>
			<image class="image-jiantou" src="/pages/images/jinru.png"></image>
		</view>

		<view class="view_line"></view>
		
		<view class='middle-item' hover-class="opcity" hover-stay-time="150">
			<image class="image_tupian_1" src="https://cdn.wantuju.com/pngsucai/imgRegular/20210801/ebbed8cd-a38f-4bf2-8856-50c67e675b31%20_55240_wantuju.jpg"></image>
			<text class='text_2'>客服</text>
			<image class="image-jiantou" src="/pages/images/jinru.png"></image>
		</view>
	</view>
</view>
<view class="tabbar" style="background-color: {{backgroundColor}};" id="tabbar">
  <view class="{{'tab'}} {{selected == index ? 'beat' : ''}}" wx:for="{{list}}" wx:key="item" catchtap="switchTab" data-index="{{index}}" data-url="{{item.pagePath}}">
    <view class="{{'tab-icon'}} {{item.center ? 'tab-icon-center' : ''}}" style="background-color: {{backgroundColor}};">
      <image style="width:100%;height:100%;" src="{{selected == index ? item.iconActive : item.icon}}" mode="" />
    </view>
    <view style="font-size:24rpx;color:{{selected == index ? selectedColor : color}}">
      {{item.text}}
    </view>
  </view>
</view>

二、设置

js

Page({
  onLoad(query) {
    // 页面加载
    console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
  },
  onReady() {
    // 页面加载完成
  },
  onShow() {
    // 页面显示
  },
  onHide() {
    // 页面隐藏
  },
  onUnload() {
    // 页面被关闭
  },
  onTitleClick() {
    // 标题被点击
    console.log('Title clicked');
    // 在这里添加处理标题点击事件的代码
  },
  onPullDownRefresh() {
    // 页面被下拉
    console.log('Page pulled down');
    // 在这里添加处理页面下拉刷新事件的代码
  },
  onReachBottom() {
    // 页面被拉到底部
    console.log('Page reached bottom');
    // 在这里添加处理页面触底事件的代码
  },
  onShareAppMessage() {
    // 返回自定义分享信息
    return {
      title: 'My App',
      desc: 'My App description',
      path: 'pages/index/index',
    };
  },
});

本次为部分台球厅代码，想要全代码。请在评论区留言