微信小程序4

98 阅读1分钟

组件: 组件的wxml

<image class="img" src="{{ritem.imgurl}}"></image>
<view class="con">
{{ritem.title}}
</view>
<view class="con">
{{ritem.content}}
</view>

</view>

组件的js

        ritem:{
            type:Object,
            value:{}
        }
    },
    

组件2 组件2的wxml:

{{msg}}
</view>

js:

        msg:{
            type:String,
            value:'你好'
        }
    },
     methods: {
        handler:function(){
            this.triggerEvent('cchange','不可以色色')
            
        }
    }

调用组件的页面 jason

  "usingComponents": {
    "List":"../../Component/List/List",
    "Header":"../../Component/Header/Header"

  }
}

wxml


<block wx:for="{{list}}" wx:key="index">
    <List ritem="{{item}}"></List>
</block>


js:

        msg:'lol头像',
        list:[
            {
            imgurl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fd1a39398-8d38-bd0d-23ad-6e74ddede47b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648447862&t=ee2f4c8e53f11e4473bef3e433eadb2c',
            title:'格温',
            content:'穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线'
            },
            {
                imgurl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F2a3347838904x3743314886b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648447862&t=7bf75ecd20fb61c8fee4f488823c3ae6',
                title:'泰隆',
                content:'穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线'
                },
                {
                    imgurl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F2a9084632x498298341b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648447862&t=cea3ce659478fac3dcb2873eb9092935',
                    title:'迦娜',
                    content:'穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线穿针引线'
                    }
        ]
    },

    change:function(str){
        this.setData({
            msg:str.detail
        })
        console.log(this.data.msg);
    },