福州搜外科技专业从事微信小程序开发、百度智能小程序定制,专业化打造新生态营销渠道、新零售市场。
福州小程序开发-打开客服菜单
福州搜外科技
福州小程序开发首页 > 小程序答疑 > 微信小程序的配置文件详解和tab选项实例
微信小程序的配置文件详解和tab选项实例
时间 : 2018-12-19 17:54 浏览量 : 95

今天小编来为大家带来微信小程序的配置文件详解和微信小程序tab选项实例。


在微信小程序当中,我们看到有: .js后缀文件,.json后缀文件,.wxss后缀文件,.wxml后缀文件

.js后缀文件就是我们写的普通的js文件

.json后缀文件就是小程序的配置文件,比如:windows的样式,页面的渲染文件顺序,Tabs导航的配置

微信小程序的配置文件详解

 

当然,初始化的实例当中没有给出Tabs配置,其实就跟window的格式一样

.wxss后缀文件就是我们写的css文件

.wxml后缀文件就相当于我们的html文件,里面的view标签就看做是div , text标签就看做是p

所有的页面都在pages文件夹当中,每个页面都有一个单独的文件,这个文件里就包括了.js .wxss .wxml 或者 .json文件

utils文件夹中,你可以放一些common函数,常用的变量等,需要的时候通过import来取得

微信小程序的配置文件详解

在project.config.json配置文件当中,我们可以看到项目的设置跟介绍,版本,appid等信息,在微信内部很多组件都已经封装好了,但是却没有tab选项卡的组件,选项卡还是很常用的,


下面是一个简单的效果


wxml

<view class="swiper-tab">

    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="tabNav">啤酒</view>

    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="tabNav">红酒</view>

    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="tabNav">白酒</view>

    <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="tabNav">黄酒</view>

</view>

<swiper current="{{currentTab}}" duration="1000"  >

    <swiper-item><view>。。。啤酒。。。。</view></swiper-item>

    <swiper-item><view>。。。红酒。。。。</view></swiper-item>

    <swiper-item><view>。。。白酒。。。</view></swiper-item>

    <swiper-item><view>。。。黄酒。。。</view></swiper-item>

</swiper>


js

 data: {

    isShow: true,

    currentTab: 0,

  },

  tabNav: function (e) {

    console.log(e.target.dataset.current, 111, this.data.currentTab)

    if (this.data.currentTab === e.target.dataset.current) {

      return false;

    } else {


      var showMode = e.target.dataset.current == 0;


      this.setData({

        currentTab: e.target.dataset.current,

        isShow: showMode

      })

    }

  },



css

/* 下面是tobar */

.swiper-tab {

  width: 100%;

  text-align: center;

  line-height: 80rpx;

  background-color:white;

}


.swiper-tab-list {

  font-size: 30rpx;

  display: inline-block;

  width: 25%;

  color: #777;

  border-bottom: 0rpx;

}


.on {

  color: #da7c0c;

  border-bottom: 2rpx solid #da7c0c;

}


.swiper-box {

  display: block;

  height: 100%;

  width: 100%;

  overflow: hidden;

}


.swiper-box view {

  text-align: center;

}


这样一个微信小程序tab选项就完成了,是不是很简单呢,有兴趣探讨小程序问题的小伙伴欢迎联系我们,我们将和大家一起探讨小程序的问题。



相关文章

支付宝小程序STS计划报名通道开启,并公布了生态孵化细则

小程序为门店零售带来了什么样的优势

小程序能为酒店带来哪些好处

欢迎在线留言
您的姓名 :
联系电话 :
邮箱地址 :
联系地址 :
留言内容 :
cache
Processed in 0.029489 Second.