devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小程序首页示例代码_小程序首页模版源码

作者：小蓝xlanll | 2024-03-14 05:43:23

赞

踩

小程序首页模版源码

html

  1. <!--index.wxml-->
  2. <view class="container">
  3.   <view class="curved"> 
  4.    <swiper class="swiperImageContainer square-dot margin-top-s" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" easing-function="easeInOutCubic">
  5.   <swiper-item wx:for="{{swiperList}}" wx:for-item="item"  wx:key="id">
  6.     <image class="swiperItemImg" src="{{item.url}}" ></image>
  7.   </swiper-item>
  8. </swiper>
  9. <!-- 公司介绍、代理记账、公司转让 -->
  10. <view class="middle">
  11.   <view class="jiesao">
  12.     <image style=" background-color: #f9ce65;" class="middle-img" src="/pages/image/gongshi.png"></image>
  13.     <view class="middle-text">
  14.       公司介绍
  15.     </view>
  16.   </view>
  17.   <view class="jiesao">
  18.     <image style=" background-color: #f7a056;" class="middle-img" src="/pages/image/jizang.png"></image>
  19.     <view class="middle-text">
  20.       代理记账
  21.     </view>
  22.   </view>
  23.   
  24.  
  25.     <view class="jiesao" bindtap="tolink">
  26.     <image style=" background-color:#8ac293; width: 45rpx;height: 45rpx;padding: 15rpx;"  class="middle-img" src="/pages/image/zuanrang.png"></image>
  27.     <view class="middle-text">
  28.       公司转让
  29.     </view>
  30.   </view>
  31.  
  32.   <view class="jiesao">
  33.     <image style="background-color:#749def;width: 45rpx;height: 45rpx;padding: 15rpx;" class="middle-img" src="/pages/image/gongsang.png"></image>
  34.     <view class="middle-text">
  35.       工商代办
  36.     </view>
  37.   </view>
  38. </view>
  39. <van-cell-group  inset>
  40.   <van-cell title="南宁市西乡塘区新阳路223号A单元2303" icon="location-o" is-link  bindtap="tomap"/>
  41.   <van-cell icon="phone-o" title="电话：" value="17776019009" is-link  bindtap="freeTell"></van-cell>
  42. </van-cell-group>
  43. <view class="zuanrang" wx:for="{{10}}">
  44.   <view class="zuanrang-demo" >
  45.     <view class="zuanrang-top">
  46.         <view class="toptext1">
  47.           转
  48.         </view>
  49.         <view class="toptext2">
  50.           广西*****进出口有限公司
  51.         </view>
  52.         <image src="/pages/image/hot.png" mode=""/>
  53.     </view>
  54.     <view class="zuanrang-bottom">
  55.     <!--  企业行业 -->
  56.       <view class="bottom-item">
  57.         <view class="item-o" >
  58.           <view class="bottom-item-top">
  59.             <view class="sanjiao">
  60.             </view>
  61.           <view>
  62.             企业行业
  63.           </view>
  64.           </view>
  65.      <view class="item-o-text">贸易类</view>
  66.  
  67.         </view>
  68.  
  69.       </view>
  70.       <!-- 企业类型 -->
  71.       <view class="bottom-item">
  72.         <view class="item-o" >
  73.           <view class="bottom-item-top">
  74.             <view class="sanjiao">
  75.             </view>
  76.           <view>
  77.             企业类型
  78.           </view>
  79.           </view>
  80.      <view class="item-o-text">有限责任公司</view>
  81.         </view>
  82.       </view>
  83.       <!-- 纳税类型 -->
  84.       <view class="bottom-item">
  85.         <view class="item-o" >
  86.           <view class="bottom-item-top">
  87.             <view class="sanjiao">
  88.             </view>
  89.           <view>
  90.             纳税类型
  91.           </view>
  92.           </view>
  93.      <view class="item-o-text">小规模纳税人</view>
  94.         </view>
  95.       </view>
  96.       <!-- 注册资本 -->
  97.       <view class="bottom-item">
  98.         <view class="item-o" >
  99.           <view class="bottom-item-top">
  100.             <view class="sanjiao">
  101.             </view>
  102.           <view>
  103.             注册资本
  104.           </view>
  105.           </view>
  106.      <view class="item-o-text">      100-500万</view>
  107.         </view>
  108.       </view>
  109.       <!-- 所在地区 -->
  110.       <view class="bottom-item">
  111.         <view class="item-o" >
  112.           <view class="bottom-item-top">
  113.             <view class="sanjiao">
  114.             </view>
  115.           <view>
  116.             所在地区
  117.           </view>
  118.           </view>
  119.      <view class="item-o-text">青秀区</view>
  120.         </view>
  121.       </view>
  122.     </view>
  123.   </view>
  124. </view>
  125.  
  126. </view>
  127. <view>
  128. </view>
  129.  
  130. </view>

js

  1. // index.js
  2. // 获取应用实例
  3. const app = getApp()
  4.  
  5. Page({
  6.   data: {
  7.     swiperList: [
  8.       {
  9.       id: 0,
  10.       url: 'https://imgs.yxhhr.com/Public/Uploads/2022-01-14/61e0f0930f9a0.jpg'
  11.     }, {
  12.       id: 1,
  13.       url: 'https://imgs.yxhhr.com/Public/Uploads/2022-01-14/61e0f0930f9a0.jpg',
  14.     }, 
  15.     {
  16.       id: 2,
  17.       url: 'https://imgs.yxhhr.com/Public/Uploads/2022-01-14/61e0f0930f9a0.jpg'
  18.     }],
  19.  
  20.   },
  21.  
  22.  
  23.   onLoad() {
  24.     if (wx.getUserProfile) {
  25.       this.setData({
  26.         canIUseGetUserProfile: true
  27.       })
  28.     }
  29.   },
  30.   tolink(){
  31.     wx.navigateTo({
  32.       "url": "/pages/index/link/link"
  33.     })
  34.   },
  35.   tomap(){
  36.     wx.openLocation({
  37.       latitude: 23.099994,
  38.       longitude: 113.324520,
  39.       scale: 18
  40.     })
  41.   },
  42.   freeTell() {
  43.     wx.makePhoneCall({
  44.       phoneNumber: '17776019009', //仅为示例，并非真实的电话号码
  45.       success: function() {
  46.         console.log("拨打电话成功！")
  47.       },
  48.       fail: function() {
  49.         console.log("拨打电话失败！")
  50.       }
  51.     })
  52.   },
  53.   getUserProfile(e) {
  54.     // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
  55.     wx.getUserProfile({
  56.       desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
  57.       success: (res) => {
  58.         console.log(res)
  59.         this.setData({
  60.           userInfo: res.userInfo,
  61.           hasUserInfo: true
  62.         })
  63.       }
  64.     })
  65.   },
  66.   getUserInfo(e) {
  67.     // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
  68.     console.log(e)
  69.     this.setData({
  70.       userInfo: e.detail.userInfo,
  71.       hasUserInfo: true
  72.     })
  73.   }
  74. })

css

  1. page {
  2.   background-color: #f8f8f8;
  3. }
  4. .curved {
  5.   position: relative;
  6.   background: #f46634;
  7.   height: 18vh;
  8.   border-bottom-left-radius: 50% 20%;
  9.   border-bottom-right-radius: 50% 20%;
  10. }
  11. .swiperImageContainer {
  12.   width: 100%;
  13.   height: 300rpx;
  14. }
  15. .swiperItemImg {
  16.   position: absolute;
  17.   width: 92%;
  18.   height: 300rpx;
  19.   border-radius: 20rpx;
  20.   margin: 0 4%;
  21. }
  22.  
  23. swiper.square-dot .wx-swiper-dot {
  24.     background-color: var(--white);
  25.     opacity: 0.4;
  26.     width: 10rpx;
  27.     height: 10rpx;
  28.     border-radius: 20rpx;
  29.     margin: 0 8rpx !important;
  30. }
  31.  
  32. swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {
  33.     opacity: 1;
  34.     width: 30rpx;
  35. }
  36. .middle{
  37.   display: flex;
  38.   justify-content: space-around;
  39.   margin-top: 30rpx;
  40.   margin-bottom: 30rpx;
  41. }
  42. .middle-img{
  43.   padding: 6rpx;
  44.   border-radius: 50%;
  45.   width: 60rpx;
  46.   height: 60rpx;
  47.   display: flex;
  48.   justify-content: center;
  49.   align-items: center;
  50. }
  51. .middle-text{
  52.   margin-top: 15rpx;
  53.   font-size: 24rpx;
  54. }
  55.  
  56. .jiesao{
  57.  display: flex;
  58.  flex-direction: column;
  59.  align-items: center;
  60.  justify-content: center;
  61. }
  62. .zuanrang{
  63.   margin-top: 20rpx;
  64.   background-color: white;
  65.   margin-bottom: 25rpx;
  66.   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  67.   border-radius: 20rpx;
  68.   margin-right: 20rpx;
  69.   margin-left: 20rpx;
  70. }
  71. .zuanrang-demo{
  72.   margin: 0 15rpx;
  73.  
  74. }
  75. .zuanrang-top{
  76.   display: flex;
  77.   align-items: center;
  78.   padding: 10rpx 0;
  79.   margin-bottom: 5rpx;
  80.   border-bottom: 1rpx solid #969696;
  81. }
  82. .zuanrang-top .toptext1{
  83.   font-weight: bold;
  84.   color: #f26533;
  85.   margin:0 10rpx;
  86. }
  87. .zuanrang-top image{
  88.   margin-left: 30rpx;
  89.   width: 34rpx;
  90.   height: 34rpx;
  91. }
  92. .zuanrang-bottom{
  93.   display: flex;
  94.   justify-content: space-between;
  95. }
  96. .item-o{
  97.   display: flex;
  98.   flex-direction: column;
  99. }
  100. .item-o-text{
  101.   font-size: 23rpx;
  102.   margin-bottom: 10rpx;
  103. }
  104. .bottom-item-top{
  105.   display: flex;
  106.   justify-content: space-between;
  107.   font-size: 25rpx;
  108.   align-items: center;
  109.   color: #969696;
  110.   margin-bottom: 5rpx;
  111. }
  112. .sanjiao{
  113.   width: 0;
  114.   height: 0;
  115.   border-left: 10rpx solid #969696;
  116.   border-top: 10rpx solid transparent;
  117.   border-bottom: 10rpx solid transparent;
  118.   margin-right:6rpx;
  119. }

json

  1. {
  2.   "navigationBarTitleText": "狄牛网",
  3.   "navigationBarBackgroundColor": "#f46634",
  4.   "navigationBarTextStyle": "white"
  5. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/232479
推荐阅读