微信小程序：基础复习

设置底部导航栏

设置图标Icon属性

"iconPath":"icon/shouye.png",
"selectedIconPath":"icon/shouye.png"

基础组件

轮播图组件

components/swiper/swiper.wxml

<!--components/swiper/swiper.wxml-->
<text>{
   {text}}</text>
<swiper indicator-dots="{
     {indicatorDots}}" autoplay="{
     {autoplay}}" interval="{
     {interval}}" duration="{
     {duration}}">
    <view wx:for="{
     {list}}" wx:key="*this">
        <swiper-item>
            <image style="width: 100%; height: 200px;" src="{
     {item}}" alt="img" />
        </swiper-item>
    </view>
</swiper>

components/swiper/swiper.ts

// components/swiper/swiper.ts

Component({
    
    /** * 组件的属性列表 */
    properties: {
    
        text: {
    
            type: String,
            value: '轮播组件'
        },
        list: {
    
            type: Array,
            value: [],
        }
    },

    /** * 组件的初始数据 */
    data: {
    
        indicatorDots: true,
        vertical: false,
        autoplay: false,
        interval: 2000,
        duration: 500
    },

    /** * 组件的方法列表 */
    methods: {
    

    }
})

在页面中使用

pages/travel/travel.wxml

<!--pages/travel/travel.wxml-->
<text>pages/travel/travel.wxml</text>
<Swiper text="旅途攻略" list="{
     {list}}" />

pages/travel/travel.ts

// pages/travel/travel.ts


Page({
    

    /** * 页面的初始数据 */
    data: {
    
        list: ['https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1910021352061916-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656316971&t=f39466d70208ceb27fa6f8bebe645913', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242312005c1-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656316971&t=88bc83e0116ca3a90b1e1a4cc582c6cd', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1910021221064F5-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656317158&t=b733f1d81f31d7a487b5c3c46bfe0b46'],
    },

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

    },

    /** * 生命周期函数--监听页面初次渲染完成 */
    onReady() {
    

    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    }
})

{
    
  "usingComponents": {
    
    "Swiper": "../../components/swiper/swiper"
  }
}

子组件（自定义组件component)给父组件传递参数

components

<!--components/search/index.wxml-->
<text>components/search/index.wxml</text>
<input class="search" type="{
     {type}}" bindblur="getChangeValue" />

// components/search/index.ts
Component({
    
    /** * 组件的属性列表 */
    properties: {
    
        type: {
    
            type: String,
            value: 'text'
        }
    },

    /** * 组件的初始数据 */
    data: {
    

    },

    /** * 组件的方法列表 */
    methods: {
    
        getChangeValue (v) {
    
            console.log('v', v?.detail);
            this.triggerEvent('getSearchValue',v)
        }
    }
})

父组件

<!--pages/travel/travel.wxml-->
<text>pages/travel/travel.wxml</text>
<Swiper text="旅途攻略" list="{
     {list}}" />
<view></view>
<!-- 搜索栏 -->
<Search bind:getSearchValue="getSearhName" />

// pages/travel/travel.ts


Page({
    

    /** * 页面的初始数据 */
    data: {
    
        list: ['https://img0.baidu.com/it/u=530426417,2082848644&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1910021352061916-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656316971&t=f39466d70208ceb27fa6f8bebe645913', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F4k%2Fs%2F02%2F2109242312005c1-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656316971&t=88bc83e0116ca3a90b1e1a4cc582c6cd', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F1910021221064F5-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656317158&t=b733f1d81f31d7a487b5c3c46bfe0b46'],
    },

    /** * 生命周期函数--监听页面加载 */
    onLoad() {
    
       
    },

    /** * 生命周期函数--监听页面初次渲染完成 */
    onReady() {
    

    },

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

    },

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

    },

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

    },

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

    },

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

    },

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

    },
    getSearhName(e){
    
        console.log('bbb',e);
    }
})