【微信小程序】本地服务页面案例实现

简介: 【微信小程序】本地服务页面案例实现

本期案例:本地服务页面实现:


效果:



配置窗口


localLife.json:


{
    "usingComponents": {},
    "navigationBarTitleText": "本地服务",
    "navigationBarBackgroundColor": "#7373B9"
}


页面文档


localLife.wxml:


<!--pages/localLife/localLife.wxml-->
<!-- <text>pages/localLife/localLife.wxml</text> -->
<!-- 设置轮播图 -->
<swiper indicator-dots="true" indicator-active-color="white" autoplay="true" interval="2000" circular="true">
<swiper-item><image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-5edb299393da36aeaca9ab547e872881_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661670556&t=47d094b7b75f143d5298e64105c8945a" mode="widthFix" ></image></swiper-item>
    <swiper-item>
        <image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2Fv2-3e2fcd13556e324e298e01745968473a_b.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661670556&t=fdacfc168736e619e2c6e0080b7c7ac1" mode="widthFix"></image>
    </swiper-item>
</swiper>
<!-- 九宫格 -->
<view class="view1">
    <view>
    <image src="/image/美食.png" mode="heightFix"></image>
    <text>美食</text>
    </view>
    <view>
    <image src="/image/洗浴.png"></image>
    <text>洗浴足疗</text>
    </view>
    <view> 
    <image src="/image/结婚照.png"></image>
    <text>结婚啦</text>
    </view>
    <view>
    <image src="/image/卡拉OK.png"></image>
    <text>卡拉ok</text>
    </view>
    <view>
    <image src="/image/找工作.png"></image>
    <text>找工作</text>
    </view>
    <view>
    <image src="/image/名师辅导.png"></image>
    <text>辅导班</text>
    </view>
    <view>
    <image src="/image/汽车保养维修申请.png"></image>
    <text>汽车保养</text>
    </view>
    <view>
    <image src="/image/icon/公租房.png"></image>
    <text>租房</text>
    </view>
    <view>
    <image src="/image/装修.png"></image>
    <text>装修</text>
    </view>
</view>
<view class="img_set">
    <image src="/image/商家推荐.png"></image>
    <image src="/image/1581745172948.jpeg"></image>
</view>


页面样式


localLife.wxss:


/* pages/localLife/localLife.wxss */
swiper{
    margin-bottom: 20rpx;
}
swiper-item image{
    width: 100%;
}
.view1{
    display:flex;
    /* width: 33.3%; */
    flex-wrap: wrap;
    background-color: aliceblue;
    border-left: rgb(134, 100, 54) solid 1px;
    border-top: tan solid 1px;
}
.view1 view{
    width: 32%;
    height: 150rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-top: 20rpx; */
    border-right: solid lightgreen 1rpx;
    border-bottom: solid lightgreen 1rpx;
    box-sizing: border-box;
}
.view1 view image{
    margin-top: 20rpx;
    width: 60rpx;
    height: 60rpx;
}
.view1 view text{
     margin-top:10rpx ;
    font-size: 20rpx;
}
.img_set image{
    width: 50%;
    height: 300rpx;
}


全局配置


app.json:


{
  "pages":[
    "pages/localLife/localLife",
    "pages/suliang/suliang",
    "pages/index/index",
    "pages/logs/logs",
    "pages/callOus/callOus"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor":"#fe5cbd",
    "navigationBarTitleText": "苏凉",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#d5c59f",
    "onReachBottomDistance": 30
  },
  "tabBar": {
      "color": "#d5c59f",
      "list": [
        {
          "pagePath": "pages/index/index",
          "text": "首页",
          "iconPath": "/image/首页.png",
          "selectedIconPath": "/image/首页.png"
      },
        {
            "pagePath": "pages/localLife/localLife",
            "text": "本地生活",
            "iconPath": "/image/本地生活.png",
            "selectedIconPath": "/image/本地生活.png"
        } ,
      {
          "pagePath": "pages/callOus/callOus",
          "text": "联系我们",
          "iconPath": "/image/专题目录.png",
          "selectedIconPath": "/image/专题目录.png"
      }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}


目录
相关文章
|
20天前
|
API 开发者
微信native支付对接案例详解
本文详细介绍了微信Native支付的对接流程,包括效果展示、产品介绍、接入前准备、开发指引、API列表、支付通知等,并强调了只有通过微信认证的服务号才能对接微信支付。每年需支付300元认证费用。
34 3
|
2月前
|
监控 小程序 前端开发
排队免单小程序开发源码案例
“排队免单小程序”旨在通过用户排队行为结合特定规则为用户提供免单或优惠机会,提升用户体验及商家流量。核心功能包括用户注册登录、排队管理、免单规则设置、支付与结算、商家管理和通知提醒等。技术上采用微信小程序开发框架,前后端分离架构,集成微信支付等服务,确保高效安全的数据处理与传输。项目开发过程涵盖需求分析、设计开发、集成测试和上线发布,后期注重数据监控、用户反馈和运营推广,以持续优化用户体验。
|
2月前
|
开发框架 小程序 测试技术
排队免单小程序开发模式案例
排队免单小程序通过线上排队系统,为用户提供便捷的免单机会。主要功能包括用户注册与登录、商家入驻与管理、排队系统、通知与提醒、活动记录与查询。技术实现涉及微信小程序原生开发框架、后端技术、API接口和第三方服务。开发过程还包括全面的测试与优化,确保稳定运行和良好体验。最后,通过提交审核、上线运营和推广策略,吸引更多用户和商家入驻。
|
3月前
|
人工智能 小程序 搜索推荐
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
今天给大家分享一个最近使用我们的“AI运动识别小程序插件”+“微搭”搭建小程序的经典案例。
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
|
3月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
114 1
|
3月前
|
缓存 数据可视化 Serverless
微信小游戏 案例一 像素飞机
微信小游戏 案例一 像素飞机
24 2
|
3月前
|
开发框架 前端开发 JavaScript
微信小游戏案例三 抓星星
微信小游戏案例三 抓星星
101 0
微信小游戏案例三 抓星星
|
3月前
|
JavaScript 小程序 前端开发
微信小程序 案例二 飞机大战
微信小程序 案例二 飞机大战
72 0
微信小程序 案例二 飞机大战
|
3月前
|
小程序 安全 数据库连接
为什么已经提交的小程序无法连接后台服务?
【10月更文挑战第17天】为什么已经提交的小程序无法连接后台服务?
150 0
|
3月前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先,明确你的短剧平台的目标用户群体和他们的需求。比如,年轻用户可能更倾向于轻松、幽默的短剧内容,而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面