字节小程序
开发者社区
小程序小游戏
登录
首页
小白是怎么做企业产品站的小程序！

小白是怎么做企业产品站的小程序！

96浏览作者: lingxinxinli

分享开发经验瓜分5000元大奖，聊聊#我写代码那些年#的故事

首页

<view class="public-wrapper">
  <swiper class="swiper" easing-function="default" indicator-dots="{{indicatorDots}}"
    indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="rgba(0, 0, 0, 1)" current="{{0}}" current-item-id=""
    previous-margin="" next-margin="" display-multiple-items="{{1}}" autoplay="{{autoplay}}" interval="{{interval}}"
    circular="{{circular}}" vertical="{{vertical}}" duration="{{duration}}" bindanimationfinish="animationFinish"
    bindtransition="transition">
    <block tt:for="{{background}}">
      <swiper-item>
        <view class="swiper-item swiper-item-{{index}}"></view>
      </swiper-item>
    </block>
  </swiper>
</view>
<view class="intro">
  <view class="biaoti-h2">产品中心</view>
  <view class="introtext">10年专注于心理相关设备、仪器、软件研发与销售,到目前已有100多款产品。</view>
</view>
<view class="product">
  <view class="product-ul">
      <view class="product-li" bindtap="jianyacang">
          <image class="product-img" mode="widthFix" src="http://ll114.com/uploads/220628/1-22062Q00332941.png"></image>
          <text class="product-text">音乐放松减压舱</text>
      </view>
      <view class="product-li">
          <image class="product-img" mode="widthFix" src="http://ll114.com/uploads/230314/1-230314103A9396.png"></image>
          <text class="product-text">实木沙盘游戏1000套装</text>
      </view>
      <view class="product-li">
          <image class="product-img" mode="widthFix" src="http://ll114.com/uploads/221010/1-221010113106362.png"></image>
          <text class="product-text">中小学心理测评系统</text>
      </view>
      <view class="product-li">
          <image class="product-img" mode="widthFix" src="http://ll114.com/uploads/220628/1-22062Q05J3128.png"></image>
          <text class="product-text">体感音乐催眠床</text>
      </view>
  </view>
</view>
<view class="intro">
  <view class="biaoti-h2">经典案例</view>
  <view class="introtext">10年积累只为展现经典的心理咨询室建设案例作品,涉及教育行业、司法行业、企业、工会、社区等。</view>
</view>
<view class="anli">
  <view class="anli-list">
    <view class="list-unstyle line-big">
      <view class="xl6 xm3 hst ">
        <image class="xl6img" mode="widthFix" src="http://ll114.com/uploads/230808/1-230PQ43531627.png" />
      </view>
      <view class="xl6 xm3 hst ">
        <image class="xl6img" mode="widthFix" src="http://ll114.com/uploads/230808/1-230PQ4493S43.png" />
      </view>
      <view class="xl6 xm3 hst ">
        <image class="xl6img" mode="widthFix" src="http://ll114.com/uploads/230808/1-230PQ45120943.png" />
      </view>
      <view class="xl6 xm3 hst ">
        <image class="xl6img" mode="widthFix" src="http://ll114.com/uploads/230808/1-230PQ4455b28.png" />
      </view>
    </view>
  </view>
</view>
<view class="indexBtn">
  <button class="Btn" open-type="" agreement="" bindtap="callMe">联系客服</button>
</view>
<view class="foot">©2023 灵心心理.版权所有</view>


css


.swiper {
  border-radius: 0rpx;
}

.swiper-item {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 310rpx;
  font-weight: 500;
  font-size: 34rpx;
}

.swiper-item-0 {
  background-color: var(--icon-color-A);
  background-image: url(http://ll114.com/img/geti.png);
  background-size: cover;
}

.swiper-item-1 {
  background-color: var(--icon-color-B);
  background: url(http://ll114.com/img/banna5.png);
  background-size: cover;
}

.swiper-item-2 {
  background-color: var(--secondary-color);
  background: url(http://ll114.com/img/banna4.png);
  background-size: cover;
}
.head{width: 100%;}
.head1{float: left;
width: 45%;}

.intro {
  text-align: center;
  font-size: 20px;
  padding:5px;

}
.introh1 {
  padding: 5px;
}
.introtext{
  text-align: center;
  font-size: 12px;
  color: #756a6a;
  font-weight:normal;

}
.outer image {width: 100%;}
.image {
  z-index: 1;
  bottom: 5px;
  right: 5px;
  width: 100%;
}
.yyfsy{
  padding: 5px;
}
.li1
  {
    display: inline-block;
    position: absolute;
    padding-top: 20px;
    left: 30px;
    color: #34bbcb;
    width: 100%;
}
.li2{
  font-size: 12px;
  margin: 0px 10px 0px;
  position: absolute;
  padding-top: 60px;
}
.anli{margin:0 auto;
	padding:0 5px;
  display:block;
}
.anli-list {
  margin-top: 0px;
  margin-bottom: 0px
}
.list-unstyle {
	list-style:none;
	padding-left:0;
}
.line-big {
	margin-left:0px;
	margin-right:0px
}
.product-list .hst {
  padding-top: 20px;
  padding-bottom: 10px;
  position: relative;
}
.xl6 {
	width:47%;
  padding: 5px;
  float: left;
  overflow: hidden;
}
.xl6img {width: 100%;}
.foot{
  font-size: 13px;
  color: #cacaca;
  text-align: center;
  padding: 20px;
  overflow: hidden;
}
.indexBtn{padding: 0px;overflow: hidden;padding:20px 20px 20px 20px;}
.Btn{}
button{}
button::after{}
.product-bannar{padding: 5px;}
.product-image{width: 100%;}
.product-title{text-align: center;font:size 20px;padding: 5px;}
.product{padding: 5px;overflow: hidden; background-color: white;}
.product-ul {margin: 0 auto;overflow: hidden; }
.product-li{width: 47%;float: left;text-align: center;overflow: hidden;padding: 5px;}
.product-img{width: 100%;}
.product-text{}

js

Page({
  data: {
      background: ['http://ll114.com/img/geti.png',
       'http://ll114.com/img/banna5.png',
        'http://ll114.com/img/banna4.png'],
      indicatorDots: true,
      vertical: false,
      autoplay: true,
      circular: true,
      interval: 3000,
      duration: 500
  },
  changeIndicatorDots(e) {
      this.setData({
          indicatorDots: !this.data.indicatorDots
      });
  },
  changeAutoplay(e) {
      this.setData({
          autoplay: !this.data.autoplay
      });
  },
  changeCircular(e) {
      this.setData({
          circular: !this.data.circular
      });
  },
  changeVertical(e) {
      this.setData({
          vertical: !this.data.vertical
      });
  },
  intervalChange(e) {
      this.setData({
          interval: e.detail.value
      });
  },
  durationChange(e) {
      this.setData({
          duration: e.detail.value
      });
  },
  animationFinish(e) {
      console.log(e.detail);
  },
  transition(e) {
      console.log(e.detail);
  },
  // 兼容右滑触发返回上一页
  disableSwipeBack() {
      tt.setSwipeBackMode(0);
  },
  enableSwipeBack() {
      tt.setSwipeBackMode(1);
  },
  callMe() {
    tt.makePhoneCall({
      phoneNumber: "18973370450",
      success(res) {
        // 调用成功 makePhoneCall:ok
        console.log("调用成功", res.errMsg);
      },
      fail(res) {
        // 调用失败 makePhoneCall:fail
        console.log("调用失败", res.errMsg);
      },
    });
  },
  fangsongMe(){
    tt.navigateTo({
        url: "/pages/product-fsy/product-fsy" ,//demo示例，一般路径形式：/pages/detail/detail?key=${value}
        success(res) {
          console.log(res);
        },
    })
  },
  jianyacang(){
    tt.navigateTo({
        url: "/pages/product-fsy/product-fsy" ,//demo示例，一般路径形式：/pages/detail/detail?key=${value}
        success(res) {
          console.log(res);
        },
    })
  },

});
最后一次编辑于 2023年09月21日
加载中