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

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

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


效果:



配置窗口


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"
}


目录
打赏
0
0
0
0
2
分享
相关文章
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
247 12
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
7月前
|
微信native支付对接案例详解
本文详细介绍了微信Native支付的对接流程,包括效果展示、产品介绍、接入前准备、开发指引、API列表、支付通知等,并强调了只有通过微信认证的服务号才能对接微信支付。每年需支付300元认证费用。
285 3
排队免单小程序开发源码案例
“排队免单小程序”旨在通过用户排队行为结合特定规则为用户提供免单或优惠机会,提升用户体验及商家流量。核心功能包括用户注册登录、排队管理、免单规则设置、支付与结算、商家管理和通知提醒等。技术上采用微信小程序开发框架,前后端分离架构,集成微信支付等服务,确保高效安全的数据处理与传输。项目开发过程涵盖需求分析、设计开发、集成测试和上线发布,后期注重数据监控、用户反馈和运营推广,以持续优化用户体验。
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
今天给大家分享一个最近使用我们的“AI运动识别小程序插件”+“微搭”搭建小程序的经典案例。
成功案例分享|使用AI运动识别插件+微搭,快速搭建AI美体运动小程序
排队免单小程序开发模式案例
排队免单小程序通过线上排队系统,为用户提供便捷的免单机会。主要功能包括用户注册与登录、商家入驻与管理、排队系统、通知与提醒、活动记录与查询。技术实现涉及微信小程序原生开发框架、后端技术、API接口和第三方服务。开发过程还包括全面的测试与优化,确保稳定运行和良好体验。最后,通过提交审核、上线运营和推广策略,吸引更多用户和商家入驻。
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
556 1
微信小游戏 案例一 像素飞机
微信小游戏 案例一 像素飞机
84 2
微信小程序 案例二 飞机大战
微信小程序 案例二 飞机大战
166 0
微信小程序 案例二 飞机大战

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问