微信小程序（九）实现首页代码

Posted 2023-03-18

参考技术A swiper
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

swiper-item 仅可放置在swiper组件中，宽高自动设置为100%。

列表渲染

条件渲染

dataset

在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。

在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

navigateTo
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

redirectTo
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

switchTab
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。

没铺开直接赋值的打印结果：(打开注释)

不加...

铺开后赋值的打印结果：(打开注释)

onPullDownRefresh

onPullDownRefresh()方法，用于监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。

onReachBottom()方法，用于监听用户上拉触底事件。

微信小程序regexp对象（附带方法解析）
getRegExp(pattern[, flags])，参数：

微信小程序UI------实现携程首页顶部的界面（弹性布局）

今天写了一个携程界面的UI，利用H5的弹性盒子来实现，学过H5弹性盒子的，来看是比较方便的，因为CSS代码都差不多。

可以看看这篇博客 快速使用CSS 弹性盒子

效果图如下：

　　

主要是携程首页的四个模块；

 

代码：

<view class="page">

    <view class="page__bd">


        <view class="section__nav">
            <view class="left border__right" bindtap="btn1"><!--bindtap 点击事件 -->
                酒店
            </view>
            <view class="right">
                <view class="item border__right border__bottom" bindtap="btn2">海外酒店</view>
                <view class="item border__bottom" bindtap="btn3">团购</view>
                <view class="item border__right">特价酒店</view>
                <view class="item">名宿-客栈</view>
            </view>
        </view>



        <view class="section__nav" style="background:#3D98FF;">
            <view class="left border__right">
                机票
            </view>
            <view class="right">
                <view class="item border__right border__bottom">火车票-抢票</view>
                <view class="item border__bottom" >汽车票-船票</view>
                <view class="item border__right">特价机票</view>
                <view class="item">专车</view>
            </view>
        </view>



        <view class="section__nav" style="background:#44C522">
            <view class="left border__right">
                旅游
            </view>
            <view class="right">
                <view class="item border__right border__bottom">目的地攻略</view>
                <view class="item border__bottom" >邮轮旅行</view>
                <view class="item border__right">周边游</view>
                <view class="item">定制旅行</view>
            </view>
        </view>



    <view class="section__nav" style="background:#FC9720">
            <view class="left border__right">
                玩乐
            </view>
            <view class="right">
                <view class="item border__right border__bottom">美食林</view>
                <view class="item border__bottom" >购物</view>
                <view class="item border__right">周边美食</view>
                <view class="item">周边好玩</view>
            </view>
        </view>

    </view>
</view>

 

CSS代码

.page__bd{
    padding:0 10rpx;
}

.section__nav{
    display:flex;
    background:#FF697A;
    height:100px;
    color:#fff;
    margin-bottom:10rpx;
}

.left{
    width:33.33%;
    font-size:14px;
}

.border__right{
    border-right:1px solid #fff;
}

.border__bottom{
    border-bottom:1px solid #fff;
}

.right{
    width:66.67%;
    flex-wrap:wrap;
}

.left,.right{
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
}

.item{
    width:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    height:50px;
    font-size:14px;
}

 

 一个简单的小案例，界面练习，和H5的弹性盒子相同。

  源码点击下载