小程序day02

目标

WXML模板语法

数据绑定

事件绑定

那麽問題來了,一次點擊會觸發兩個組件事件的話,該怎么阻止事件冒泡呢?

文本框和data的双向绑定

注意点:

只在标签里面用value="{{info}}",只会是info到文本框的单向绑定,必须在触发函数里面实现从文本框到info的绑定。然后才能像vue的v-model一样实现双向绑定。

条件渲染

相当于vue里面template.

列表渲染

这里也可以遍历对象数组。

总结: 有id用id当做key值,没有的话就拿index当做key值。

WXSS模板样式

RPX

样式导入

全局样式和局部样式

这里权重没有详细讲是什么东西。

全局配置

tabBar

页面配置

网络数据请求

案例-本地生活(首页)

该语句的作用是隐藏未校验域名的黄色警告。

接口的域名部分改成了https://applet-base-api-t.itheima.net

获取轮播图数据

然后赋值给了一个数组

渲染轮播图

使用获取到的数据渲染图片,并加上圆点效果和的衔接效果.

样式设置了轮播图区域的高度为350rpx。并设置图片铺满。

九宫格效果

域名一样要改变。

html 复制代码
<view class="grid-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
  <image src="{{item.icon}}" mode=""/>
  <text>{{item.name}}</text>
  </view>
</view>
css 复制代码
.grid-list{
  display: flex;
  flex-wrap:wrap;
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
}

.grid-item{
  width:33.33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  box-sizing: border-box;
}
.grid-item image{
  width:60rpx;
  height: 60rpx;
}
.grid-item text{
   font-size: 24rpx;
   margin-top: 10rpx;
}

底层图片布局

html 复制代码
<!--图片区域-->
<view class="img-box">
<image src="/images/link-01.png" mode="widthFix"/>
<image src="/images/link-02.png" mode="widthFix"/>
</view>
css 复制代码
.img-box{
  display: flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}
.img-box image{
  width: 45%;
}

最终效果和代码

html 复制代码
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="id">
<image src="{{item.image}}"></image>
</swiper-item>
</swiper>

<view class="grid-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
  <image src="{{item.icon}}" mode=""/>
  <text>{{item.name}}</text>
  </view>
</view>


<!--图片区域-->
<view class="img-box">
<image src="/images/link-01.png" mode="widthFix"/>
<image src="/images/link-02.png" mode="widthFix"/>
</view>
css 复制代码
/* pages/list/list.wxss */
@import "/commons/common.wxss";

swiper{
  height: 350rpx;
}
swiper image{
  width: 100%;
  height: 100%;
}

.grid-list{
  display: flex;
  flex-wrap:wrap;
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
}

.grid-item{
  width:33.33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  box-sizing: border-box;
}
.grid-item image{
  width:60rpx;
  height: 60rpx;
}
.grid-item text{
   font-size: 24rpx;
   margin-top: 10rpx;
}
.img-box{
  display: flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}
.img-box image{
  width: 45%;
}
javascript 复制代码
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //存放轮播图
    swiperList:[],
    //存放9宫格
    gridList:[]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getSwiperList(),
    this.getGridList()
  },
  getSwiperList(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/slides',
      method:'GET',
      success:(res)=>{
        console.log(res)
        this.setData({
          swiperList:res.data
        })
      }
    })
  },
  getGridList(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/categories',
      method:'GET',
      success:(res)=>{
        console.log(res)
        this.setData({
          gridList:res.data
        })
      }
    })
  }
  ,
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

总结

相关推荐
2501_915921435 小时前
iOS 是开源的吗?苹果系统的封闭与开放边界全解析(含开发与开心上架(Appuploader)实战)
android·ios·小程序·uni-app·开源·iphone·webview
2501_915909069 小时前
原生 iOS 开发全流程实战,Swift 技术栈、工程结构、自动化上传与上架发布指南
android·ios·小程序·uni-app·自动化·iphone·swift
2501_915106329 小时前
Comodo HTTPS 在工程中的部署与排查实战(证书链、兼容性与真机抓包策略)
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915909069 小时前
苹果软件混淆与 iOS 代码加固趋势,IPA 加密、应用防反编译与无源码保护的工程化演进
android·ios·小程序·https·uni-app·iphone·webview
2501_916007479 小时前
苹果软件混淆与 iOS 应用加固实录,从被逆向到 IPA 文件防反编译与无源码混淆解决方案
android·ios·小程序·https·uni-app·iphone·webview
CRMEB系统商城9 小时前
CRMEB多商户系统(PHP)v3.3正式发布,同城配送上线[特殊字符]
java·开发语言·小程序·php
尘似鹤13 小时前
微信小程序学习(六)--多媒体操作
学习·微信小程序·小程序
2501_9160088915 小时前
iOS 26 性能分析深度指南 包含帧率、渲染、资源瓶颈与 KeyMob 协助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌15 小时前
线上教学小程序:构建高效互动的云端学习空间
学习·小程序